React函数式组件中如何为input的onChange事件处理函数传递额外参数

嘿，这个场景太常见啦！你直接写<input onChange=f(1) />之所以无效，是因为这行代码会立刻执行f(1)，而不是把函数引用传给onChange属性——React需要的是一个函数，而不是函数执行后的结果。

要实现让React自动传入的event作为第一个参数，同时传递你的额外参数，有两种最常用的方案：

方案1：用箭头函数包裹 #

这是最直观的写法，箭头函数会接收React自动传入的event，然后你手动把它和额外参数一起传给目标函数：

<input onChange={(event) => f(event, 1)} />

这样你的f函数就能正常拿到第一个参数是event，第二个参数是你要传的1啦。

方案2：使用bind方法 #

利用JS的Function.prototype.bind来预设额外参数，React触发onChange时会自动把event追加到参数列表里：

<input onChange={f.bind(null, 1)} />

这里bind的第一个参数是this指向，因为你用的是函数式组件，不需要绑定this，所以传null或者undefined都可以。绑定后生成的新函数，会把1作为第一个参数，React传入的event作为第二个参数传给f。

额外性能优化提示 #

如果你的组件是性能敏感的（比如会频繁重渲染），箭头函数或bind每次渲染都会生成新函数，可能导致不必要的子组件重渲染。这时候可以用useCallback来缓存函数：

import { useCallback } from 'react';

const MyComponent = () => {
  // 用useCallback缓存处理函数，避免每次渲染都生成新函数
  const handleChange = useCallback((event, i) => {
    // 你的处理逻辑
    console.log(event.target.value, i);
  }, []);

  return <input onChange={(event) => handleChange(event, 1)} />;
};

内容的提问来源于stack exchange，提问作者Kaushik Kalesh