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

我在[sandbox][1]和下面有一个简单的代码

[1] ：将输入表单值传递给子级到父级，但出现错误，未传递该值

这是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'));

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“./Hello”导入Hello；
导入“/style.css”；
从“./Form”导入表单
类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
值：“”
};
}
handleSubmit=e=>{
这是我的国家({
value=e.target.value
})
}
render（）{
返回(
);
}
}
render（，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;

import React，{Component}来自'React'；
类形式扩展组件{
render（）{
返回(
提交
);   } }   
导出默认表单；

---

非常感谢您的帮助

您的代码中有太多错误。你应该仔细阅读这本书

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

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

第二，在表单.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;

类形式扩展组件{
render（）{
返回(
提交
);   } }   
导出默认表单；

现在回到您的原始问题，要将输入值传递给child，您需要将其作为道具传递，并在child中作为道具使用-

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

---

在您的子组件中，以

this.props.value

的形式访问该值（很抱歉输入错误。这些错误是由于保存时出现问题，结果是早期未保存的版本）。我不明白为什么需要在表单组件中使用inputValue，但由于您的回答，它在没有inputValue props的情况下以某种方式工作。@burriko，我很高兴它不知怎么起作用了。如果不直接在表单组件中使用inputValue，则不需要该值。如果这对您有所帮助，请接受它作为答案。：）