如何将其他参数传递给 React 中的事件处理程序？

Question

我试图将事件和其他一些数据（元素的索引）传递给 React 应用程序中的事件处理程序。 我在这里发现我应该做一个higher-order函数，但我没有得到一个愉快的结果。 这是我的代码片段：

  const changeNameHandler = (index) => {
    return (event) => {
      console.log(index, event);
    };
  };

  let persons = null;

  if(showValuesState) {
    persons = (
      <div>
        {
          personsState.map((person, index) => {
            return <Person
              name = {person.name}
              age = {person.age}
              click = {() => deletePersonHandler(index)}
              key = {index}
              changeName = {() => changeNameHandler(index)()}/>
          })
        }
      </div>
    );
  }

我试图在获取事件的同时将索引传递给changeNameHandler函数，但是来自console.log(index, event)语句的事件变量的值仍然是undefined 。

Answer 1

当您从 jsx 内部调用函数时，如果您想传递额外的值而不是事件，则必须考虑执行以下操作：

changeName = {() => changeNameHandler(index)}/>

另外重要的一点是，您正在将函数挂接到Person组件的changeName道具上，但您没有从中捕获event值，因此如果您需要访问处理程序中的事件值，则必须执行它像下面：

changeName = {(evt) => changeNameHandler(evt, index)}/>

通过这样做，您将在处理程序中将事件作为第一个参数，并将索引值作为第二个参数。

const changeNameHandler = (evt, index) => {
  // do what ever you want here with values 
}