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

Question

在React.js中将道具传递给父组件难道没有一个简单的方法可以通过一个孩子的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。有时，子组件包含一组信息，您希望不必查找。也许有一种将组件绑定到事件的方法在使用了一年多的Reaction之后，在SebastianLorber的回答的激励下，我总结出将子组件作为参数传递给父母中的函数是不事实上，这种反应方式，也不是一个好主意。我换了答案。

Answer 1

OP使这个问题成为一个移动的目标。它又被更新了。因此，我觉得有责任更新我的答复。

首先，回答您提供的示例：

是的，这是可能的。

您可以通过更新child的onClick成为this.props.onClick.bind(null, this):

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

然后，父类中的事件处理程序可以访问组件和事件，如下所示：

  onClick: function (component, event) {
    // console.log(component, event);
  },

JSBin快照

但这个问题本身就有误导性。

父母已经知道孩子的props.

在提供的示例中，这一点并不清楚，因为实际上没有提供任何道具。这个示例代码可能更好地支持被问到的问题：

var Child = React.createClass({
  render: function () {
    return <a onClick={this.props.onClick}> {this.props.text} </a>;
  }});var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (event) {
    // event.component.props ?why is this not available? 
  },
  render: function() {
    return <Child onClick={this.onClick} text={this.state.text} />;
  }});

在这个例子中，你已经清楚地知道了什么是孩子的道具。

JSBin快照

如果它真的是关于使用孩子的道具…

如果它真的是关于使用一个孩子的道具，你可以完全避免任何与孩子的勾搭。

JSX有一个扩展属性我经常在一些组件上使用API，比如child。它需要所有的props并将它们应用到组件中。孩子的样子是这样的：

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

允许您直接在父级中使用这些值：

var Parent = React.createClass({
  getInitialState: function () {
    return { text: "Click here" };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />;
  }});

JSBin快照

当您连接其他的子组件时，不需要额外的配置

var Parent = React.createClass({
  getInitialState: function () {
    return {
      text: "Click here",
      text2: "No, Click here",
    };
  },
  onClick: function (text) {
    alert(text);
  },
  render: function() {
    return <div>
      <Child onClick={this.onClick.bind(null, this.state.text)} text={this.state.text} />
      <Child onClick={this.onClick.bind(null, this.state.text2)} text={this.state.text2} />
    </div>;
  }});

JSBin快照

但我怀疑这不是你的实际用例。让我们进一步挖掘…

一个健壮的实例

提供的示例的泛型性质很难讨论。我创建了一个组件，演示了上述问题的实际用途，在雷克蒂途径：

DTServiceCalculator工作示例
DTServiceCalculator回购

此组件是一个简单的服务计算器。您将为它提供一个服务列表(包括名称和价格)，它将计算所选价格的总和。

孩子们完全无知。

ServiceItem是本例中的子组件。它对外界的看法不多。它需要一些道具，其中之一是单击时要调用的函数。

<div onClick={this.props.handleClick.bind(this.props.index)} />

它只会打电话给提供的handleClick提供的回调index[来源].

父母是孩子

DTServicesCalculator父组件是此示例。也是个孩子。让我们看看。

DTServiceCalculator创建子组件列表(ServiceItem为他们提供道具[来源]。它是ServiceItem但是它是组件的子组件，将列表传递给它。它不拥有数据。因此，它再次将组件的处理委托给其父组件。来源

<ServiceItem chosen={chosen} index={i} key={id} price={price} name={name} onSelect={this.props.handleServiceItem} />

handleServiceItem捕获索引，从子节点传递索引，并将其提供给其父对象[来源]

handleServiceClick (index) {
  this.props.onSelect(index);}

所有人都知道

“所有权”概念是反应中的一个重要概念。我建议多读一些关于它的文章。这里.

在我展示的示例中，我一直将事件的处理委托到组件树上，直到我们到达拥有状态的组件为止。

当我们最终到达那里时，我们会像这样处理状态选择/取消选举。来源]:

handleSelect (index) {
  let services = […this.state.services];
  services[index].chosen = (services[index].chosen) ? false : true;
  this.setState({ services: services });}

结语

尽量保持最外层的部件尽可能不透明。努力确保他们对父组件选择如何实现它们有很少的偏好。

要知道谁拥有您正在操作的数据。在大多数情况下，您需要将处理树的事件委托给以下组件：拥有那个州。

旁白：通量模式是减少应用程序中这种必要连接的好方法。

Answer 2

似乎有一个简单的答案。考虑到这一点：

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函数接受参数component，和event..我认为这是世界上最好的

这是一个糟糕的想法：让子实现细节泄露给父程序从来不是一条好途径。见塞巴斯蒂安·洛伯的答案。