不知从何而来回答这个问题，但我认为，bind会奏效。找到下面的示例代码。

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

不知从何而来回答这个问题，但我认为，bind会奏效。找到下面的示例代码。

const handleClick = (data) => {
    console.log(data)
}

<button onClick={handleClick.bind(null, { title: 'mytitle', id: '12345' })}>Login</button>

我对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>);}}

简单的方法

使用箭头功能：

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

这将创建一个新函数，该函数使用正确的参数调用handleSort。

更好的方式

将其提取到子组件中。在渲染调用中使用箭头函数的问题是，它每次都会创建一个新函数，最终导致不必要的重新渲染。

如果创建子组件，则可以传递处理程序并使用props作为参数，然后仅在props更改时重新渲染（因为处理程序引用现在从未更改）：

子组件

class TableHeader extends Component {
  handleClick = () => {
    this.props.onHeaderClick(this.props.value);
  }

  render() {
    return (
      <th onClick={this.handleClick}>
        {this.props.column}
      </th>
    );
  }
}

主要部件

{this.props.defaultColumns.map((column) => (
  <TableHeader
    value={column}
    onHeaderClick={this.handleSort}
  />
))}

旧简易方式（ES5）

使用.bind传递所需的参数，这样可以将函数与Component上下文绑定：

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

class extends React.Component {
    onClickDiv = (column) => {
        // do stuff
    }
    render() {
        return <div onClick={() => this.onClickDiv('123')} />
    }
}

我想您必须将该方法绑定到React的类实例。使用构造函数绑定React中的所有方法更安全。在将参数传递给方法的情况下，第一个参数用于绑定方法的“this”上下文，因此无法访问方法内部的值。