将参数传递给 reactjs 单击处理程序

Question

我对向 React 点击处理程序传递参数有疑问。我有以下代码，但由于某种原因，节点参数未传递给切换函数。不应该吗？它是这样定义的，因为它是一个递归组件。

var Element = React.createClass({

    toggle: function(e,node){

    },

    render: function(){

        var nodes = this.props.children.map(function(n){

                return <Element node={n} text={n.text} children={n.children}  />

        });

        return (
               <span onClick={this.toggle.bind(this,this.props.node)}>{this.props.text}</span>

        );
    }

});

Answer 1

Function.prototype.bind 从左边开始绑定参数。接收节点参数的正确方法是在参数列表的最左边位置寻找它：

toggle: function(node, event) {
  console.log('node', node);
  console.log('event', event);
}

有关示例，请参阅 http://jsfiddle.net/8xxfgce7/。

Answer 2

虽然上面的回答是正确的。这是另一个如何将 event 和 parameter 传递给 onClick 函数的示例。

您的事件触发元素，例如按钮：

<button onClick={this.editTask.bind(this, item._id)}>
  Edit item
</button>

事件处理函数：

editItem(id, event) {
  event.preventDefault() // Prevents default form submission
  console.log('id: ', id) // Prints the item id 
  .
  .
  .
}

将参数传递给 reactjs 单击处理程序

Pass argument to reactjs click handler

javascript

reactjs