在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&nbsp;Child&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<a&nbsp;onClick={this.props.onClick.bind(null,&nbsp;this)}>Click&nbsp;me</a>; &nbsp;&nbsp;}});然后，父类中的事件处理程序可以访问组件和事件，如下所示：&nbsp;&nbsp;onClick:&nbsp;function&nbsp;(component,&nbsp;event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;console.log(component,&nbsp;event); &nbsp;&nbsp;},JSBin快照但这个问题本身就有误导性。父母已经知道孩子的props.在提供的示例中，这一点并不清楚，因为实际上没有提供任何道具。这个示例代码可能更好地支持被问到的问题：var&nbsp;Child&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<a&nbsp;onClick={this.props.onClick}>&nbsp;{this.props.text}&nbsp;</a>; &nbsp;&nbsp;}});var&nbsp;Parent&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;getInitialState:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;text:&nbsp;"Click&nbsp;here"&nbsp;}; &nbsp;&nbsp;}, &nbsp;&nbsp;onClick:&nbsp;function&nbsp;(event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;event.component.props&nbsp;?why&nbsp;is&nbsp;this&nbsp;not&nbsp;available?&nbsp; &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Child&nbsp;onClick={this.onClick}&nbsp;text={this.state.text}&nbsp;/>; &nbsp;&nbsp;}});在这个例子中，你已经清楚地知道了什么是孩子的道具。JSBin快照如果它真的是关于使用孩子的道具…如果它真的是关于使用一个孩子的道具，你可以完全避免任何与孩子的勾搭。JSX有一个扩展属性我经常在一些组件上使用API，比如child。它需要所有的props并将它们应用到组件中。孩子的样子是这样的：var&nbsp;Child&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;render:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<a&nbsp;{...this.props}>&nbsp;{this.props.text}&nbsp;</a>; &nbsp;&nbsp;}});允许您直接在父级中使用这些值：var&nbsp;Parent&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;getInitialState:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{&nbsp;text:&nbsp;"Click&nbsp;here"&nbsp;}; &nbsp;&nbsp;}, &nbsp;&nbsp;onClick:&nbsp;function&nbsp;(text)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert(text); &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<Child&nbsp;onClick={this.onClick.bind(null,&nbsp;this.state.text)}&nbsp;text={this.state.text}&nbsp;/>; &nbsp;&nbsp;}});JSBin快照当您连接其他的子组件时，不需要额外的配置var&nbsp;Parent&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;getInitialState:&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text:&nbsp;"Click&nbsp;here", &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;text2:&nbsp;"No,&nbsp;Click&nbsp;here", &nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;}, &nbsp;&nbsp;onClick:&nbsp;function&nbsp;(text)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;alert(text); &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;<div> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Child&nbsp;onClick={this.onClick.bind(null,&nbsp;this.state.text)}&nbsp;text={this.state.text}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<Child&nbsp;onClick={this.onClick.bind(null,&nbsp;this.state.text2)}&nbsp;text={this.state.text2}&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;</div>; &nbsp;&nbsp;}});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&nbsp;(index)&nbsp;{ &nbsp;&nbsp;this.props.onSelect(index);}所有人都知道“所有权”概念是反应中的一个重要概念。我建议多读一些关于它的文章。这里.在我展示的示例中，我一直将事件的处理委托到组件树上，直到我们到达拥有状态的组件为止。当我们最终到达那里时，我们会像这样处理状态选择/取消选举。来源]:handleSelect&nbsp;(index)&nbsp;{ &nbsp;&nbsp;let&nbsp;services&nbsp;=&nbsp;[…this.state.services]; &nbsp;&nbsp;services[index].chosen&nbsp;=&nbsp;(services[index].chosen)&nbsp;?&nbsp;false&nbsp;:&nbsp;true; &nbsp;&nbsp;this.setState({&nbsp;services:&nbsp;services&nbsp;});}结语尽量保持最外层的部件尽可能不透明。努力确保他们对父组件选择如何实现它们有很少的偏好。要知道谁拥有您正在操作的数据。在大多数情况下，您需要将处理树的事件委托给以下组件：拥有那个州。旁白：通量模式是减少应用程序中这种必要连接的好方法。

Answer 2

似乎有一个简单的答案。考虑到这一点：var&nbsp;Child&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;render:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;<a&nbsp;onClick={this.props.onClick.bind(null,&nbsp;this)}>Click&nbsp;me</a> &nbsp;&nbsp;}});var&nbsp;Parent&nbsp;=&nbsp;React.createClass({ &nbsp;&nbsp;onClick:&nbsp;function(component,&nbsp;event)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;component.props&nbsp;//&nbsp;#=>&nbsp;{Object...} &nbsp;&nbsp;}, &nbsp;&nbsp;render:&nbsp;function()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;<Child&nbsp;onClick={this.onClick}&nbsp;/> &nbsp;&nbsp;}});钥匙在打电话bind(null, this)在this.props.onClick事件，从父级传递。现在，onclick函数接受参数component，和event..我认为这是世界上最好的这是一个糟糕的想法：让子实现细节泄露给父程序从来不是一条好途径。见塞巴斯蒂安·洛伯的答案。