时间戳

首页 > 解决方案 > 如何将数据从子组件发送到父组件

reactjs - 如何将数据从子组件发送到父组件

问题描述

你能告诉我，如果我想将数据从子组件发送到父组件并使用它的值。我该怎么做。

对于 Ex- 在我的子组件中有一个复选框。其检查或未检查的值需要发送到父组件，我在条件中进一步利用

有没有可能。如果是，请您发送一些链接或片段

片段看起来像这样

在父类

onHandleClick(value) {.....some code}

<ChildComponent onHandleClick={onHandleSaveClick} />

在子类中，它看起来像

onCheckBoxHandle() {
.....some code
    }

<input type="checkbox" onClick={this.onCheckBoxHandle} label="Some text" />

但既没有调用父函数，也没有调用子函数

谢谢你的帮助！

标签： reactjs

解决方案

欢迎堆栈溢出！要将数据从子组件发送到父组件，必须先在父组件中键入一个函数，然后将其作为 props 发送到子组件。然后，您可以在子组件中获取这些道具并将值发送到其中，然后在主组件中随意使用它们并管理您的应用程序。

你会看到我在这里准备的例子是什么样的。

//ChildB component
class ChildB extends React.Component {

  render() {

    var handleToUpdate = this.props.handleToUpdate;
    return ( < div > < button onClick = {
      () => handleToUpdate('someVar')
    } > Push me < /button></div > )
  }
}

//ParentA component
class ParentA extends React.Component {

  constructor(props) {
    super(props);
    var handleToUpdate = this.handleToUpdate.bind(this);
    var arg1 = '';
  }

  handleToUpdate(someArg) {
    alert('We pass argument from Child to Parent: ' + someArg);
    this.setState({
      arg1: someArg
    });
  }

  render() {
    var handleToUpdate = this.handleToUpdate;

    return ( < div >
      <
      ChildB handleToUpdate = {
        handleToUpdate.bind(this)
      }
      /></div > )
  }
}

if (document.querySelector("#demo")) {
  ReactDOM.render( <
    ParentA / > ,
    document.querySelector("#demo")
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>

<div id="demo">134</div>

推荐阅读