React 向事件处理程序传递参数

React 向事件处理程序传递参数

Flying
2015-07-09 / 0 评论 / 96 阅读 / 正在检测是否收录...

当你使用 ES6 class 语法定义一个组件的时候,通常的做法是将事件处理函数声明为 class 中的方法。最佳实践需要为class 的方法绑定 this,我们在上篇文章已经谈到这个问题。事件处理函数还有一个问题就是传递参数。本文将介绍三种方式:

使用 bind 方法

该模式下,React 的事件对象 e 会被作为第二个参数传递,事件对象以及更多的参数将会被隐式的进行传递:

class Demo extends React.Component {
  handleSend(message, e) {
    console.log(message)
    console.log(e.target)
  }

  render() {
    const numbers = [1, 2, 3];
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={this.handleSend.bind(this, id)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中,我们使用 bindonClick 事件绑定了 handleSend 方法,该方法第一个参数为 this,第二个参数为事件对象 e, 从左到右点击按钮会在浏览器的控制台打印“1”、“2”、“3”。

回调中使用箭头函数

该模式下,React 的事件对象 e 会被作为第二个参数传递,事件对象必须显式的进行传递:

class Demo extends React.Component {
  handleSend(message, e) {
    console.log(message)
    console.log(e.target)
  }

  render() {
    const numbers = [1, 2, 3];
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={(e) => this.handleSend(id, e)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中,我们在回调中使用箭头函数再调用 handleSend 方法,该方法第一个参数为 id,显式传递了第二个参数事件对象 e。从左到右点击按钮会在浏览器的控制台打印“1”、“2”、“3”。

回调中使用柯里化函数

该模式下,和箭头函数类似,只是箭头函数内调用的是柯里化函数。该柯里化函数第一个参数为事件对象 e。

柯里化函数就是我们给一个函数传入一部分参数,此时就会返回一个函数来接收剩余的参数。
class Demo extends React.Component {
  render() {
    const numbers = [1, 2, 3];
    const fn = e => message => {
      console.log(message);
      console.log(e.target);
    }
    return (
      numbers.map(id => {
        return (
          <button key={id} onClick={(e) => fn(e)(id)}>
            Delete
          </button>
        )
      })
    );
  }
}

ReactDOM.render(
  <Demo />,
  document.getElementById('root')
);

本示例中,我们在回调中使用箭头函数,再调用柯里化函数 fn,该函数在 React 的 render() 方法中声明,第一个参数 为事件对象 e。从左到右点击按钮会在浏览器的控制台打印“1 Delete”、“2”、“3”。

参考示例

访问 codepen 查看完整示例代码及效果

总结

前两种模式都是调用事件处理方法传递参数,需要 thiscontext。第三种模式调用绑定柯里化函数传递参数,不需要处理 this

1

评论 (0)

取消