Question

我是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上。任何帮助表示赞赏。

Answer 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>
    );
  }
}

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

Answer 2

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

在您的父组件中，您可以使用带回调的箭头函数，只需输入this.textInput

，即可在父组件的任何位置访问<input> DOM元素。

有关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"/>

Answer 3

有几种方法可以解决这个问题。一种是您可以在输入中添加onChange事件以更新补充工具栏组件的状态。然后，当单击提交处理程序时，从状态传递值，并让HomePage handleSubmit（）接受该值。

另一种方法是将HomePage组件中的onChange道具传递给补充工具栏。然后输入将onChange设置为该prop。

在React中将数据传递给父级

3 个答案: