如何向ReactJS事件处理函数传递Props？

嘿，我来帮你搞定这个问题～结合你给出的CommentForm组件代码，我整理了几种常用的方式，让你能轻松给事件处理函数传递额外的props：

方法1：使用箭头函数直接传参 #

这种方式最直观，在绑定事件的时候用箭头函数把事件对象和你要传递的props一起传入处理函数：

首先完善你的组件，添加render方法和需要传递的props（比如假设我们要传递postId这个props）：

var CommentForm = React.createClass({
  getInitialState: function() {
    return { author: '', text: '' };
  },
  handleAuthorChange: function (e, postId) {
    this.setState({ author: e.target.value });
    // 这里就能拿到传递过来的postId了
    console.log('当前帖子ID:', postId);
  },
  handleTextChange: function (e, postId) {
    this.setState({ text: e.target.value });
    console.log('当前帖子ID:', postId);
  },
  render: function() {
    // 假设从父组件拿到postId这个props
    const { postId } = this.props;
    return (
      <div className="comment-form">
        <input
          type="text"
          placeholder="你的名字"
          onChange={(e) => this.handleAuthorChange(e, postId)}
          value={this.state.author}
        />
        <textarea
          placeholder="评论内容"
          onChange={(e) => this.handleTextChange(e, postId)}
          value={this.state.text}
        />
      </div>
    );
  }
});

方法2：使用bind方法绑定参数 #

bind方法不仅可以帮我们绑定this指向，还能提前传入额外的参数。注意用这种方式时，自定义参数会排在事件对象的前面：

var CommentForm = React.createClass({
  getInitialState: function() {
    return { author: '', text: '' };
  },
  // 参数顺序要调整：自定义props在前，事件对象e在后
  handleAuthorChange: function (postId, e) {
    this.setState({ author: e.target.value });
    console.log('当前帖子ID:', postId);
  },
  handleTextChange: function (postId, e) {
    this.setState({ text: e.target.value });
    console.log('当前帖子ID:', postId);
  },
  render: function() {
    const { postId } = this.props;
    return (
      <div className="comment-form">
        <input
          type="text"
          placeholder="你的名字"
          onChange={this.handleAuthorChange.bind(this, postId)}
          value={this.state.author}
        />
        <textarea
          placeholder="评论内容"
          onChange={this.handleTextChange.bind(this, postId)}
          value={this.state.text}
        />
      </div>
    );
  }
});

小提醒 #

• 上面两种方法在render里创建新函数（箭头函数或bind生成新函数），如果组件频繁渲染，可能会有轻微的性能影响。不过对于大多数普通场景，这两种方式完全够用啦～
• 如果你需要传递多个props，直接在箭头函数或bind里添加更多参数就行，比如(e) => this.handleAuthorChange(e, postId, userName)或者bind(this, postId, userName)。

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