如何在 ReactJS 的单个事件处理程序中传递多个道具？

在 ReactJS 中，事件处理程序的参数通常只包含一个 event 对象。但是，在某些情况下，我们需要将其他属性传递给事件处理程序。在这篇文章中，我们将看到如何在 ReactJS 的单个事件处理程序中传递多个道具。

传递多个道具

传递多个道具非常简单。我们只需要将要传递的道具作为参数传递给事件处理程序即可。例如，如果我们要将 name 和 age 属性传递给事件处理程序，我们可以这样写：

class MyComponent extends React.Component {
  handleClick = (event, name, age) => {
    console.log(name, age);
  }

  render() {
    return <button onClick={(e) => this.handleClick(e, 'John', 30)}>Click me</button>;
  }
}

在上面的代码中，我们在事件处理程序的第二个和第三个参数中传递了两个属性，即 name 和 age。在事件处理程序中，我们可以轻松地访问这些属性。

传递一个对象

如果我们需要传递多个属性，那么最好的方法是将它们捆绑在一个对象中，并将整个对象传递给事件处理程序。例如，我们可以这样写：

class MyComponent extends React.Component {
  handleClick = (event, data) => {
    console.log(data.name, data.age);
  }

  render() {
    const data = { name: 'John', age: 30 };
    return <button onClick={(e) => this.handleClick(e, data)}>Click me</button>;
  }
}

在上面的代码中，我们将 name 和 age 属性捆绑在一个名为 data 的对象中，并将整个对象传递给 handleClick 事件处理程序。在事件处理程序中，我们可以通过 data.name 和 data.age 访问这些属性。

通过这种方法传递多个属性可以使代码更加清晰和易于维护。