Reactjs 在子组件中使用箭头函数对传递参数进行反应

我有这些父组件和子组件，我想通过单击函数在子组件中选择一个项目。然而，子组件中的函数似乎是自动调用的，而不是等待用户单击元素。为了更清楚，这里是我的父组件和子组件

export class ParentView extends Component {
  state = {
    selectedItem: {}
  }

  handleClick = (item) => {
    alert('you click me');
    this.setState({selectedItem: item});
  } 

  render() {
    let item = { name: 'Item-1' };
    return (
      <div>
        <ChildItem item={item} handleClick={this.handleClick} />
      </div>
    );
  }
}

export class ChildItem extends Component {
  render() {
    const {item, handleClick} = this.props;
    return (
      <div>
        <a  onClick={handleClick(item)} />
      </div>
    );
  }
}

导出类ParentView扩展组件{
状态={
selectedItem:{}
}
handleClick=（项目）=>{
警报（“你点击我”）；
this.setState（{selectedItem:item}）；
} 
render（）{
让item={name:'item-1'}；
返回(
);
}
}
导出类ChildItem扩展组件{
render（）{
const{item，handleClick}=this.props；
返回(
);
}
}

---

这些是我的组件，它们使用箭头函数将

handleClick

传递给子组件，但警报总是在第一次渲染时被调用，而不会被用户触发。有什么建议吗？

您应该将函数本身传递给

onClick

，而不是传递的函数调用的结果

如果要使用param调用它，可以选择：

• 用

  项绑定它

  用

  handleClick.bind（这个，项）

  <代码>绑定创建一个新函数，该函数将具有预定义的第一个参数-

  项

• 传递新的箭头函数，如

  （）=>handleClick（项目）

下面是一个例子：

export class ChildItem extends Component {
  render() {
    const { item, handleClick } = this.props;

    return (
      <div>
        <a onClick={() => handleClick(item)} />
      </div>
    )
  }
}

导出类ChildItem扩展组件{
render（）{
const{item，handleClick}=this.props；
返回(
，但你不应该仅仅因为两点而遵循这条规则

1） 
性能问题
应该进行测量。我们不禁止使用
数组.prototype.forEach
来支持常规的
for
，因为
for
是相同的或“更快的”

2） 将单击处理程序定义为类属性会增加组件实例的初始化步骤。重新渲染在react中快速有效，因此有时初始渲染更为重要

只需使用对您更有利的方法，并可能阅读类似以下内容的文章
ES6方式：

使用箭头函数=>

onClick={() => handleClick(item)}


（@havenchyk的答案是ES5方式）。
接受的答案对性能有影响：
ChildItem
组件将重新呈现，即使数据没有更改，因为每个呈现都分配了一个新函数（这是因为
.bind
；与箭头函数相同）。在这种特殊情况下，通过从新公共类字段上的
props
获取正确的处理程序及其参数，很容易避免此类问题：

export class ChildItem extends Component {

  onClick = () => {
    this.props.handleClick(this.props.item);
  }

  render() {
    return (
      <div>
        <a  onClick={this.onClick} />
      </div>
    );
  }
}

导出类ChildItem扩展组件{
onClick=（）=>{
this.props.handleClick（this.props.item）；
}
render（）{
返回(
);
}
}

ParentView
保持不变。
谢谢，我用
onClick={（）=>handleClick（item）}
解决了这个问题，这里我没有得到的是如何将项传递给handleClick，因为arrow函数的参数为空。这是如何工作的？如果我有onClick={this.handleClick}和一个函数：handleClick=element=>{//stuff}元素是如何传入的？@Accribus元素本身（我假定您指的是react元素）不会为
onClick={this.handleClick}
传递，而是会传递事件。
onClick={（）=>handleClick（item）}
在这里您可以传递
项目
manually@uladzimir我认为Accribus的意思是问我们如何在arrow函数定义中使用item，而不是将其作为参数传递？据我所知，这里使用词法作用域来解析item。也就是说，arrow函数定义中的item将解析为item decl因为箭头函数是在render method的词法环境中定义的，所以在render method中被禁用。我说的对吗？在这种情况下，如果我们使用类还是只使用函数组件，会有什么区别吗？@Leff-Sure。在函数组件的情况下，您将如何定义onClick？它将等同于在类组件的渲染中定义它，而我们想避免。