在 React 中将数据传递给父级答案

【问题标题】：Passing data to parent in React在 React 中将数据传递给父级
【发布时间】：2017-03-23 16:21:39
【问题描述】：

我是 React 的新手，因此是这个问题。我有一个父组件 - HomePage 和一个子组件 - SideBar。

我的子组件侧边栏需要在提交按钮单击时将数据传递回父级，父级需要在 api 上发布。

这是我的父组件，

class HomePage extends React.Component{

  constructor(props) {
    .......
    this.handleSubmit = this.handleSubmit.bind(this);
  }
  handleSubmit(){
  //Logic to get the data from the child and post to localhost:8080/
  }
  render(){
    return(

        <div className="col-md-2 left-pane">
          <Sidebar handleSubmitButton={this.state.handleSubmit}/>
        </div>

    );
  }

}

这是我的子组件，

class Sidebar extends React.Component {

  handleSubmitButton(event) {
    event.preventDefault();

  }

  render() {
    return (
      <div>

          <input type="text"/>

            <button type="button" className="btn btn-info btn-icons" onClick={this.props.handleSubmitButton} >
              <span className="glyphicon glyphicon-send" aria-hidden="true"/>
            </button>


      </div>
    );

  }
}

Sidebar.propTypes = {
  handleSubmitButton: React.PropTypes.func
};

我的问题是如何使用侧边栏按钮单击上的 onclick 方法获取输入文本并将其传递给父级以将其发布到 api 上。任何帮助表示赞赏。

【问题讨论】：

标签： javascript reactjs dom

【解决方案1】：

您的父组件不应直接访问输入，而应依赖子组件在需要时将任何值传递给父组件。

class HomePage extends React.Component {

  constructor(props) {
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(textInputValue){
    // The callback passed to the child component will
    // submit the data back to it's parent.
    // Logic to post to localhost:8080/
  }

  render(){
    return(
      <div className="col-md-2 left-pane">
        <Sidebar handleSubmitButton={ this.handleSubmit }/>
      </div>
    );
  }
}

class Sidebar extends React.Component {

  constructor(props) {
    this.handleSubmitButton = this.handleSubmitButton.bind(this);
  }

  handleSubmitButton(event) {
    event.preventDefault();

    // By giving the input the `ref` attribute, we can access it anywhere
    const textInputValue = this.refs.input.value;

    // Submit the value to the parent component
    this.props.handleSubmitButton(textInputValue);
  }

  render() {
    return (
      <div>
        <input type="text" ref="input" />

        <button type="button" className="..." onClick={this.handleSubmitButton} >
          <span className="glyphicon glyphicon-send" aria-hidden="true"/>
        </button>
      </div>
    );
  }
}

这可以防止将您的组件耦合在一起，并便于以后进行测试。

【讨论】：

【解决方案2】：

在您的子组件中，您可以为 ref 属性创建一个属性。直接访问 DOM 元素通常是通过设置 refs 来完成的。

在您的父组件中，您可以使用带有回调的箭头函数，它允许您访问父组件中任何位置的<input> DOM 元素，只需键入 this.textInput

更多关于 refs 的信息可以在 React 官方文档中找到：https://facebook.github.io/react/docs/refs-and-the-dom.html

父组件：

handleSubmit() {
  console.log(this.textInput.value);
}

<Sidebar 
  inputRef={(input) => this.textInput = input} 
  handleSubmitButton={this.state.handleSubmit}
/>

子组件：

<input ref={this.props.inputRef} type="text"/>

【讨论】：

【解决方案3】：

有几种方法可以解决。一种是您可以将 onChange 事件添加到输入以更新侧边栏组件的状态。然后，当单击提交处理程序时，从 state 传递值，并让 HomePage handleSubmit() 接受该值。

另一种方法是将 HomePage 组件中的 onChange 属性也传递给 Sidebar。然后输入会将 onChange 设置为该属性。

【讨论】：