react 子组件 如何向 父组件 传输数据

在React中，子组件向父组件传递数据需要通过回调函数进行实现。具体步骤如下：

1. 在父组件中定义一个函数，该函数将作为回调函数传递给子组件。

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: '' };
    this.handleData = this.handleData.bind(this);
  }

  handleData(data) {
    this.setState({ data: data });
  }

  render() {
    return (
      <div>
        <ChildComponent onData={this.handleData} />
        <p>Data: {this.state.data}</p>
      </div>
    );
  }
}

2. 在子组件中触发回调函数并传递数据。

class ChildComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { input: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

  handleChange(event) {
    this.setState({ input: event.target.value });
  }

  handleClick() {
    this.props.onData(this.state.input);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.input} onChange={this.handleChange} />
        <button onClick={this.handleClick}>Submit</button>
      </div>
    );
  }
}

在上述代码中，当用户输入数据并点击Submit按钮时，子组件会调用handleClick函数，该函数会触发父组件的handleData函数并将数据作为参数传递给它。父组件的handleData函数会更新父组件的状态并重新渲染页面，最终显示传递的数据。