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

如果你使用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)} />

Answer 2

你可以试试这个：

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

Answer 3

来自Fleezey评论中链接的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

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

// 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 5

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

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

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

5 个答案: