当前位置：首页 > React

react事件如何传值

2026-01-24 07:26:31React

通过事件参数传递

在React中，事件处理函数会自动接收一个事件对象作为参数。可以通过该对象访问事件相关信息，例如目标元素的值或属性。

function handleChange(event) {
  console.log(event.target.value); // 获取输入框的值
}

<input type="text" onChange={handleChange} />

使用箭头函数绑定额外参数

在事件绑定中使用箭头函数，可以显式传递自定义参数。这种方式适合需要传递组件状态或额外数据的场景。

function handleClick(id, event) {
  console.log(id, event); // 同时获取自定义参数和事件对象
}

<button onClick={(e) => handleClick(123, e)}>点击</button>

通过data-*属性传递

DOM元素支持自定义data属性，可以从事件对象中读取这些属性值。适用于需要从元素本身提取数据的场景。

function handleClick(event) {
  const id = event.target.dataset.id; // 通过dataset获取data-id
}

<button data-id="123" onClick={handleClick}>点击</button>

利用闭包传递值

在循环渲染组件时，可以通过闭包特性绑定当前迭代的值。这种方式常用于列表项的点击事件。

function List({ items }) {
  return (
    <ul>
      {items.map(item => (
        <li key={item.id} onClick={() => console.log(item.id)}>
          {item.text}
        </li>
      ))}
    </ul>
  );
}

使用useCallback缓存函数

当需要传递参数且避免不必要的重新渲染时，可以用useCallback钩子记忆事件处理函数。

const handleClick = useCallback((id) => {
  console.log(id);
}, []);

<button onClick={() => handleClick(123)}>点击</button>

通过Context跨组件传递

对于深层嵌套组件的事件通信，可以通过React Context传递事件处理函数和值。

const MyContext = createContext();

function Parent() {
  const value = { id: 123 };
  return (
    <MyContext.Provider value={value}>
      <Child />
    </MyContext.Provider>
  );
}

function Child() {
  const { id } = useContext(MyContext);
  return <button onClick={() => console.log(id)}>点击</button>;
}

自定义Hooks封装逻辑

将事件处理逻辑封装为自定义Hook，可以复用参数传递逻辑。

react事件如何传值

function useEventHandler(initialValue) {
  const [value, setValue] = useState(initialValue);
  const handleChange = (event) => {
    setValue(event.target.value);
  };
  return [value, handleChange];
}

function InputComponent() {
  const [text, handleTextChange] = useEventHandler('');
  return <input value={text} onChange={handleTextChange} />;
}