将道具传递给React.js中的父组件

JavaScript

Tom神奇

2020-03-10

props在React.js中，没有一种简单的方法可以通过事件将子对象传递给其父对象吗？

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(event) {
    // event.component.props ?why is this not available?
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

我知道您可以使用受控组件来传递输入值，但是最好传递整个工具包n'kaboodle。有时，子组件包含一些您不想查找的信息。

也许有一种将组件绑定到事件的方法？

更新– 9/1/2015

使用后反应了一年多，和塞巴斯蒂安·洛伯的回答的刺激下，我已经得出结论传递子组件作为参数传递给函数的父母是不是事实上的方式做出反应，也不是永远的好主意。我已经换了答案。

第441篇《将道具传递给React.js中的父组件》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共2个回答

JinJin米亚 2020.03.10

这是在父构造函数中使用函数绑定的简单3步ES6实现。这是官方反应教程推荐的第一种方式（这里也没有涵盖公共类字段的语法）。您可以在以下网址找到所有这些信息：https://reactjs.org/docs/handling-events.html

绑定父函数，以便子代可以调用它们（并将数据传递给父函数！：D）

确保在父级构造函数中绑定在父级中创建的函数
将绑定函数作为道具传递给孩子（没有lambda，因为我们将ref传递给函数）
从子事件中调用绑定函数（Lambda！在事件触发时调用该函数。如果不这样做，该函数将在加载时自动运行，而不会在事件上触发。）

父功能

handleFilterApply(filterVals){}

家长建设者

this.handleFilterApply = this.handleFilterApply.bind(this);

道具传递给孩子

onApplyClick = {this.handleFilterApply}

儿童活动电话

onClick = {() => {props.onApplyClick(filterVals)}

西门西门 2020.03.10

似乎有一个简单的答案。考虑一下：

var Child = React.createClass({
  render: function() {
    <a onClick={this.props.onClick.bind(null, this)}>Click me</a>
  }
});

var Parent = React.createClass({
  onClick: function(component, event) {
    component.props // #=> {Object...}
  },
  render: function() {
    <Child onClick={this.onClick} />
  }
});

关键是调用bind(null, this)的this.props.onClick事件，从父通过。现在，onClick函数接受参数componentAND event。我认为这是世界上最好的。