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

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

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

JinJin米亚2020/03/10 10:44:01

这是在父构造函数中使用函数绑定的简单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 10:44:01

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

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。我认为这是世界上最好的。

更新：2015年9月1日

这是一个坏主意：让子实现细节泄漏给父代绝不是一个好方法。请参阅Sebastien Lorber的答案。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer