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

【问题标题】：How can I pass other arguments to event handler in React?如何将其他参数传递给 React 中的事件处理程序？
【发布时间】：2021-09-07 02:59:38
【问题描述】：

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

  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。

【问题讨论】：

changeName = {(event) => changeNameHandler(event, index)}/>
@RobertoZvjerković 谢谢！！！
请不要在问题中包含答案；自我回答很好。不过，这可能是个骗局，例如 stackoverflow.com/q/51042381/438992 等。

标签： javascript reactjs

【解决方案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 
}

【讨论】：