javascript - 在 ReactJS onclick 中传递参数

Question

我有这个 React 组件，它具有从列表生成的项目(带有映射函数)。这些元素中的每一个都有一个按钮。我想让这个按钮的onclick按钮传入一个参数来标识哪个列表项的按钮被点击了。

看起来像这样。

var Component = React.createClass({
    assignItem: function(item){
        this.setState({item:item})
    },
    render: function(){
        var listItems = list.map(function(item){
        return <div>{item}
        <button onClick={this.assignItem(item)>Click</button>
        </div>
        })
        return <div>{listItems}</div>
    }
})

那当然不行。错误消息说 this.assignItem 不是一个函数。我知道官方 React 文档是这样建议的:

var handleClick = function(i, props) {
  console.log('You clicked: ' + props.items[i]);
}

function GroceryList(props) {  
  return (
    <div>
  {props.items.map(function(item, i) {
    return (
      <div onClick={handleClick.bind(this, i, props)} key={i}>{item}</div>
    );
  })}
</div>
  );
}
ReactDOM.render(
   <GroceryList items={['Apple', 'Banana', 'Cranberry']} />, mountNode
);

但这适用于组件外部的功能。因为我希望我的函数可以操纵状态，所以我想将它保留在 React 组件中。

我该怎么做？

Answer 1

最初接受的答案:

您可以绑定(bind)到this上的函数，就像React示例一样，但是由于您是在map回调中呈现，因此您需要pass in thisArg或者使用粗箭头函数:

var Component = React.createClass({
    assignItem: function(item){
        this.setState({item:item})
    },
    render: function(){
        // bind to this.assignItem
        var listItems = list.map(function(item){
            return <div>{item}
                <button onClick={this.assignItem.bind(this, item)}>Click</button>
            </div>
        }, this); // pass in this, or use fat arrow map callback
        return <div>{listItems}</div>
    }
})

2017 年更新:

这是一个使用 old React API 的老问题以及相应的旧答案。今天你应该使用 class or functional React component API .要将参数传递给点击处理程序，您只需编写一个内联 fat arrow function并使用您想要的任何参数进行调用。上面的例子最终是这样的:

class MyComponent extends React.Component { // or React.PureComponent
    assignItem = item => { // bound arrow function handler
        this.setState({ item: item });
    }
    render() {
        var listItems = list.map(item => {
            // onClick is an arrow function that calls this.assignItem
            return <div>{item}
                <button onClick={e => this.assignItem(item)}>Click</button>
            </div>
        });
        return <div>{ listItems }</div>
    }
}

注意:必须绑定(bind) assignItem 处理程序，此处使用箭头函数作为 class property 完成。 .