将值传递给React中的父组件

Question

本质上，我有一个表单组件供用户填写。 当他们完成一个动作时： onChange={onChange}它返回一个值（子组件）；

function onChange(value) {
  console.log("This is: ", value);
}

我想将值传递给父组件中的状态（ 以便可以处理from并发送表单数据 ）。 我怎样才能做到这一点？ 我的构造函数看起来像这样（父组件）；

constructor(props) {
  super(props);
  this.state = {
    form: {
      name: '',
      age: '',
      value: ''
    }
  };
}

尝试学习反应，请轻松一些，因为我不确定该怎么做。 希望有任何反馈！ 谢谢！

Answer 1

当您是入门者时，请仔细耐心阅读官方文档入门指南 。

在react组件中， 状态是内部状态， props是从外部传递的状态。

您只能通过setState方法修改状态。

对于您提出的问题，您可以定义一个回调函数，该回调函数在父组件中调用setState，然后将回调函数作为道具传递给子组件。

Answer 2

正如Zhili所说，您应该在父组件中定义一个函数，该函数作为prop传递给子组件。 这是一个简单的示例：

const Child = ({ onSubmit }) => (
  <form onSubmit={onSubmit}>
    { /* your <input/>'s here ... */}
  </form>
);

class Parent extends React.Component {
  state = {
    value: null,
  };

  onChildSubmit = (value) => {
    this.setState({
      value,
    });
  }

  render() {
    return (
      <div class="Something">
        <Child onSubmit={} />
      </div>
    )
  }
}