在 React 中如何正确地将输入值从子级传递给父级

Question

我在[沙盒][1]及以下

中有一个简单的代码

[1]: https://stackblitz.com/edit/react-72dprn 将输入表单值传递给子项到父项，但出了点问题，值没有传递。

这是app.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import Form from './form'

class App extends Component {
  constructor() {
    super();
    this.state = {
      value: ""
    };
  }

  handleSubmit = e=>{
    this.setState({
      value=e.target.value
    })
  }

  render() {
    return (
      <div>
        <Form onSubmit={this.handleSubmit}/>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

还有 Form.js

import React, { Component } from 'react';
class form extends Component {   
    render() { 
        return (
          <form className="replyForm" onSubmit={this.props.onSubmit}>
           <input /> 
           <button type="submit" className='btn btn-success'>Submit</button>
          </form>);   } }   
export default form;

非常感谢任何帮助！

Answer 1

你的代码错误太多了。您应该正确阅读react docs

首先你的状态设置不正确-

  handleSubmit = e=>{
    this.setState({
      value: e.target.value   //this is an object don't assign a value//
    })
  }

其次 - 在您的 form.js 中，您的组件以小写字母开头。 React 组件以大写开头 -

class Form extends Component {   
    render() { 
        return (
          <form className="replyForm" onSubmit={this.props.onSubmit}>
           <input /> 
           <button type="submit" className='btn btn-success'>Submit</button>
          </form>);   } }   
export default Form;

现在回到你原来的问题，要将输入的值传递给 child 你需要将它作为 props 传递并在 child 中作为 props -

<Form onSubmit={this.handleSubmit} inputValue={this.state.value} />

在您的 child 组件中访问该值作为 this.props.value。

在 React 中如何正确地将输入值从子级传递给父级

In React how to PROPERLY pass input value from child to parent

reactjs

react-props