当前位置：首页 > React

react事件如何传值

2026-03-31 15:01:18React

React 事件传值方法

在 React 中，事件传值通常通过以下几种方式实现，每种方式适用于不同场景：

使用箭头函数传递参数

通过箭头函数可以直接在事件绑定中传递参数，避免立即执行函数。

<button onClick={(e) => this.handleClick(id, e)}>Click</button>

箭头函数中的 e 是 React 合成事件对象，如果需要使用原生事件对象，可以通过 e.nativeEvent 访问。

使用 bind 方法

通过 Function.prototype.bind 可以预先绑定参数，第一个参数通常是 this，后续参数会作为事件处理函数的参数。

<button onClick={this.handleClick.bind(this, id)}>Click</button>

bind 方法会返回一个新函数，原始函数的 this 值和参数会被固定。

通过自定义属性传递数据

DOM 元素可以通过 data-* 属性存储自定义数据，事件处理函数中通过 event.target.dataset 访问。

<button data-id={id} onClick={this.handleClick}>Click</button>

handleClick = (e) => {
  const id = e.target.dataset.id;
}

这种方法适合传递简单数据，且不需要修改组件状态。

高阶函数封装

通过高阶函数可以生成特定的事件处理函数，闭包机制可以保留参数。

handleClick = (id) => (e) => {
  console.log(id, e);
}

<button onClick={this.handleClick(id)}>Click</button>

这种方式在循环渲染多个组件时特别有用，可以避免在渲染时创建新函数。

通过上下文传递

在类组件中可以通过 this.context 访问上下文数据，函数组件则使用 useContext Hook。

const ThemeContext = React.createContext('light');

class ThemedButton extends React.Component {
  static contextType = ThemeContext;
  handleClick = () => {
    console.log(this.context);
  }
  render() {
    return <button onClick={this.handleClick}>Click</button>;
  }
}

上下文适用于跨多层组件传递数据，而不仅限于父子组件。

使用 ref 获取 DOM 值

通过 ref 可以访问 DOM 节点的当前值，适用于表单元素。

constructor(props) {
  super(props);
  this.inputRef = React.createRef();
}

handleClick = () => {
  console.log(this.inputRef.current.value);
}

render() {
  return (
    <>
      <input ref={this.inputRef} />
      <button onClick={this.handleClick}>Submit</button>
    </>
  );
}

ref 提供了直接访问 DOM 节点的能力，但应谨慎使用以避免破坏 React 的数据流。

react事件如何传值