Javascript 在reactjsonclick中传递参数

我有一个React组件，它包含从列表生成的项目（带有map函数）。每个元素都有一个按钮。我希望此按钮的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>
    }
})

var Component=React.createClass({
分配项目：功能（项目）{
this.setState（{item:item}）
},
render:function（）{
var listItems=list.map（函数（项）{
返回{item}
点击
})
返回{listItems}
}
})

那当然不行。错误消息表示this.assignItem不是函数。 我知道官方文件表明：

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
);

var handleClick=函数（i，道具）{
console.log（'您单击：'+props.items[i]）；
}
函数GroceryList（props）{
返回(
{props.items.map（函数（item，i）{
返回(
{item}
);
})}
);
}
ReactDOM.render(
，mountNode
);

但这在组件之外的函数中起作用。因为我想让我的函数操纵状态，所以我想把它保持在React组件中

如何做到这一点？

最初接受的答案： 您可以像React示例一样将

绑定到
上的函数，但是，由于要在
映射
回调中渲染，您需要使用或使用胖箭头函数：

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>
    }
})

var Component=React.createClass({
分配项目：功能（项目）{
this.setState（{item:item}）
},
render:function（）{
//绑定到此.assignItem
var listItems=list.map（函数（项）{
返回{item}
点击
}，this）；//传入此，或使用胖箭头映射回调
返回{listItems}
}
})

2017年更新：
这是一个老问题，使用了一个新的答案。今天，您应该使用。要将参数传递给click处理程序，您只需编写一个内联函数，并使用所需的任何参数进行调用。上述示例的结尾如下所示：

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>
    }
}

类MyComponent扩展了React.Component{//或React.PureComponent
assignItem=item=>{//绑定箭头函数处理程序
this.setState（{item:item}）；
}
render（）{
var listItems=list.map（项=>{
//onClick是调用this.assignItem的arrow函数
返回{item}
此.assignItem（item）}>单击
});
返回{listItems}
}
}

注意：
assignItem
处理程序必须绑定，在这里使用箭头函数作为一个函数。
@MariePelletier，如果我返回标记，那么我还需要使用默认值。如何将事件传递给assignItem？或者我应该总是在这种情况下使用
bind
将前置参数，但仍然传递原始参数，因此
assignItem
可以将第二个事件arg作为
函数（项，事件）
并调用
event.preventDefault（）
。