在 React 中绑定函数时如何传递事件参数？

Question

我有一个input HTML 标签，onChange 目前在哪里

onChange={() => { this.props.someFunc(this.props.someVal, e.target.checked) }

但是，我想遵循 es-lint no-bind 规则（我想避免使用内联函数），但我在处理这个 onChange 函数的参数时遇到了问题。

在我的构造函数中，我有：

constructor() {
  super();
  this.state = {
    // some state
  };
  this._onChangeHandler = this._onChangeHandler.bind(this);
}

_this.onChangeHandler = (event, val) => {
  this.props.someFunc(event.target.checked, val);
}

render() {
  <div>
    {
      this.props.inputs.map((x) => {
        const someValue = // ...a calculated value

        return (
          <label
            }>
            <input
              onChange={ this._onChangeHandler(someValue) } // need BOTH someValue and the event
              checked={ aBool }
              type="checkbox"
              value={ anotherValue }/>
            <span>{ textHere }</span>
          </label>
        );
      })
    }
  </div>
}

我查看了this post，但到目前为止还没有运气。我需要做什么才能将值和事件传递给绑定函数？

Answer 1

在上面公认的柯里化解决方案中，参数的顺序是错误的。 另外，当实际调用处理程序时，它不处理多个参数。这是一个改进的版本：

// Helper method that returns a function - order matters here!!!
const generateHandler = (value, method) => (...e) => method(value, ...e)

// Apply the helper method
<input onChange={generateHandler(someValue, this._onChangeHandler)} />

Answer 2

当您现在拥有代码时，您会在event 输入变量中收到someValue 的值，在val 输入变量中收到事件对象。也就是说，您只需颠倒两个输入变量的顺序，就可以得到您期望的结果。

当您将函数绑定到事件时，您的输入变量将首先被调用，然后您将获得定义为返回的事件 API 的任何内容。

Answer 3

来自 Flezey 评论中链接的 es-lint 示例。以下是您的情况：

var List = React.createClass({
  constructor() {
      super();
      this._onChangeHandler = this._onChangeHandler.bind(this);
  }

  this._onChangeHandler = (event, val) => {
    this.props.someFunc(event.target.checked, val);
  }

  render() {
    <div>
      {
        this.props.inputs.map((x) => {
          const someValue = // ...a calculated value

          return (
            <label>
              <ListItem
                onChange={ this._onChangeHandler }
                changeHandlerValue={ someValue }
                checked={ aBool }
                value={ anotherValue } />
              <span>{ textHere }</span>
            </label>
          );
        })
      }
    </div>
  }
});

var ListItem = React.createClass({
  render() {
    // render the input using the props passed in
    return (
      <input
         onChange={this._onChange} 
         checked={this.props.checked} 
         type="checkbox"
         value={this.props.value}
      />
    );
  },
  _onChange(event) {
    // trigger the event handler and pass both the event and the value
    this.props.onChange(event, this.props.changeHandlerValue);
  }
});

Answer 4

如果你使用柯里化怎么办？

// Helper method that returns a function
const generateHandler = (value, method) => e => method(e, value)

// Apply the helper method
<input onChange={generateHandler(someValue, this._onChangeHandler)} />

Answer 5

你可以试试这个：

<input
  onChange={(e) => this._onChangeHandler(e, someValue)}
/>