我对JSX onClick事件有以下3点建议-

实际上，我们不需要在代码中使用.bind（）或Arrow函数。您可以在代码中简单使用。您还可以将onClick事件从th（或ul）移动到tr（或li）以提高性能。基本上，您的n li元素将有n个“事件侦听器”。所以最后代码将如下所示：＜ul onClick＝｛this.onItemClick｝＞｛this.props.items.map（item=>＜li key＝｛item.id｝data itemid＝｛item.id｝｝＞...</li>)}</ul>//您可以在onItemClick方法中访问item.id，如下所示：onItemClick=（事件）=>{console.log（e.target.getAttribute（“item.id”））；}我同意上面提到的为ListItem和List创建单独的React组件的方法。然而，如果您有1000个li，那么将创建1000个Event Listener，这使得代码看起来很好。请确保您不应该有太多的事件侦听器。从“React”导入React；从“./ListItem”导入ListItem；导出默认类List扩展React.Component{/***这个List-react组件是一个通用组件，它将道具作为物品列表，并提供onlick*回调名称handleItemClick*@param｛String｝item-传递给调用者的item对象*/handleItemClick=（项）=>{if（this.props.onItemClick）{this.props.onItemClick（项）；}}/***render方法将项目列表作为道具，并包含ListItem组件*@returns｛string｝-返回项目列表*/render（）{返回(＜div＞｛this.props.items.map（item=><ListItem key={item.id}item={item}onItemClick={this.handleItemClick}/>)}</div>);}}从“React”导入React；导出默认类ListItem扩展React.Component{/***这个List-react组件是一个通用组件，它将道具作为物品，并提供onlick*回调名称handleItemClick*@param｛String｝item-传递给调用者的item对象*/handleItemClick=（）=>{if（this.props.item&&this.props.onItemClick）{this.props.onItem单击（this.props.项）；}}/***render方法将项目作为道具，并在li中打印*@returns｛string｝-返回项目列表*/render（）{返回(<li key={this.props.item.id}onClick={this.handleItemClick}>{this.props.item.text｝</li>);}}

React Hooks解决方案2022

const arr = [
  { id: 1, txt: 'One' },
  { id: 2, txt: 'Two' },
  { id: 3, txt: 'Three' },
]

const App = () => {
  const handleClick = useCallback(
    (id) => () => {
      console.log("ID: ", id)
    },
    [],
  )

  return (
    <div>
      {arr.map((item) => (
        <button onClick={handleClick(item.id)}>{item.txt}</button>
      ))}
    </div>
  )
}

您可以传递一个函数以使用Callback的返回，然后可以通过传递参数在渲染中正常调用函数！只需确保正确设置useCallback的依赖数组。

React>=16的最佳解决方案

我发现在不使用内联函数的情况下调用onClick、onChange等中具有多个参数的函数的最干净的方法是使用React 16和更高版本中提供的自定义数据属性。

const App = () => {
  const onClick = (e) => {
    const value1 = e.currentTarget.getAttribute("data-value1")
    const value2 = e.currentTarget.getAttribute("data-value2")
    const value2 = e.currentTarget.getAttribute("data-value2")
    console.log("Values1", value1)
    console.log("Values2", value2)
    console.log("Values3", value3)
  }
  return (
    <button onClick={onClick} data-value1="a" data-value2="b" data-value3="c" />
  )
}

上面的示例是针对功能组件的，但即使在类组件中，实现也非常相似。

这种方法不会产生不必要的重新渲染，因为您没有使用内联函数，并且可以避免使用这种方法绑定的麻烦。

它允许您在函数中传递任意数量的值。

如果要将值作为道具传递给子组件的onClick中使用的子组件，则也可以在那里使用此方法，而无需创建包装函数。

在您希望将对象的id传递给onClick的情况下，也可以使用对象数组，如下所示。

const App = () => {
  const [arrState, setArrState] = useState(arr)

  const deleteContent = (e) => {
    const id = e.currentTarget.getAttribute("data-id")
    const tempArr = [...arrState]
    const filteredArr = tempArr.filter((item) => item.id !== id)
    setArrState(filteredArr)
  }

  return (
    <div>
      {arrState.map((item) => (
        <React.Fragment key={item.id}>
          <p>{item.content}</p>
          <button onClick={deleteContent} data-id={item.id}>
            Delete
          </button>
        </React.Fragment>
      ))}
    </div>
  )
}

[[h/t发送至@E.Sundin，以便在评论中链接此内容]

顶级答案（匿名函数或绑定）会起作用，但它不是最有效的，因为它为map（）函数生成的每个实例创建了事件处理程序的副本。

这是对ESLint插件反应最佳方式的解释：

项目列表渲染中绑定的一个常见用例是在渲染列表时每个列表项的单独回调：

const List = props => (
      <ul>
        {props.items.map(item =>
          <li key={item.id} onClick={() => console.log(item.id)}>
            ...
          </li>
        )}
      </ul>
    );

与其这样做，不如将重复的部分拉到自己的部分组件：

const List = props => (
      <ul>
        {props.items.map(item =>
          <ListItem 
            key={item.id} 
            item={item} 
            onItemClick={props.onItemClick} // assume this is passed down to List
           />
        )}
      </ul>
    );


const ListItem = props => {
  const _onClick = () => {
    console.log(props.item.id);
  }
    return (
      <li onClick={_onClick}>
        ...
      </li>
    );

});

这将加快渲染速度，因为它避免了创建新的函数（通过绑定调用）。

使用箭头功能：

您必须安装阶段2：

npm安装babel-preset-stage-2：

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value=0
        }
    }

    changeValue = (data) => (e) => {
        alert(data);  //10
        this.setState({ [value]: data })
    }

    render() {
        const data = 10;
        return (
            <div>
                <input type="button" onClick={this.changeValue(data)} />
            </div>
        );
    }
}
export default App; 

如今，有了ES6，我觉得我们可以使用更新的答案。

return (
  <th value={column} onClick={()=>this.handleSort(column)} >{column}</th>
);

基本上，（对于任何不知道的人）由于onClick期望传递给它一个函数，所以bind可以工作，因为它创建了一个函数的副本。相反，我们可以传递一个箭头函数表达式，它只调用我们想要的函数，并保留它。您应该永远不需要在React中绑定渲染方法，但如果由于某种原因，您在某个组件方法中丢失了这一点：

constructor(props) {
  super(props);
  this.myMethod = this.myMethod.bind(this);
}

当使用函数而不是类时，这实际上相当容易。

    const [breakfastMain, setBreakFastMain] = useState("Breakfast");

const changeBreakfastMain = (e) => {
    setBreakFastMain(e.target.value);
//sometimes "value" won't do it, like for text, etc. In that case you need to 
//write 'e.target/innerHTML'
 }

<ul  onClick={changeBreakfastMain}>
   <li>
"some text here"
   </li>
<li>
"some text here"
   </li>
</ul>