Question

我试图将事件和其他一些数据（元素的索引）传递给 React 应用程序中的事件处理程序。我发现 here 我应该创建一个 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)}/>

另外重要的一点是，您将函数挂接到 changeName 组件的 Person 道具上，但您没有从中捕获 event 值，因此如果您需要访问处理程序中的事件值，您必须按照以下方式进行操作：

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

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

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

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

1 个答案: