javascript - 在 React 中绑定(bind)函数时如何传递事件参数？

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 ，但到目前为止还没有运气。我需要做什么才能将值和事件传递给绑定(bind)函数？

Answer 1

如果你使用柯里化(Currying)呢？

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

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