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

Posted 2023-02-22

【中文标题】在 React 中绑定函数时如何传递事件参数？

【英文标题】：How to pass the event argument when binding functions in React?

【发布时间】：2017-07-03 05:12:36

【问题描述】：

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

【参考方案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) />

【参考方案2】：

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

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

【参考方案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);
  
);

【参考方案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) />

【讨论】：

这与“内联”函数完全相同。

是的，但它不会触发这里所要求的 no-bind 规则

代码：answer = 0。编译器：Answer should not be 0. 修改代码：answer = 1-1

我同意，但有时，特别是在大公司中，您无法更改 ESLint 配置，您必须解决它?

然后您可以禁用带有注释的一行，让您知道您承认问题，而不是混淆和隐藏它。

【参考方案5】：

你可以试试这个：

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

【讨论】：

这是一个内联函数。正如我在帖子中所说，我想避免这种情况。

我的错，不知道该规则意味着没有内联函数。您仍然可以使用 onClick 处理程序创建一个新组件。检查这些es-lint protips的第二个示例

是的，这就是我想要遵循的。但目前尚不清楚如何处理事件和附加值。