用参数处理事件处理函数的更好方法是什么？答案

【问题标题】：What's the better way to handle event handler function with parameters?用参数处理事件处理函数的更好方法是什么？
【发布时间】：2019-03-25 01:08:18
【问题描述】：

我正在尝试实现事件处理函数以避免每次组件renders和re-renders时创建一个新函数。

场景1：

如果我像下面这样在构造函数中绑定函数并且在onChange 中没有参数，它只会在捆绑文件中创建一个新函数一次

 constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
       value: ""
    }
 } 

 handleChange(e){
    this.setState({
       value: e.target.value
    });
 }

 render(){
    const { value } = this.state;
    return(
      <div>
        <input type="text" onChange={this.handleChange} value={value} />
      </div>
    )
 }

场景 2：

但是当我想将some parameters 和event 传递给handleChange 函数时，如下所示，我相信每次组件renders 和re-renders 时都会创建一个新函数

 constructor(props){
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
       value: ""
    }
 } 

 handleChange(e, param1, param2){
    this.setState({
       value: e.target.value
    });
 }

 render(){
    const { value } = this.state;
    return(
      <div>
        <input type="text" onChange={e => this.handleChange(e, param1, param2)} value={value} />
      </div>
    )
 }

所以，

如何更好地编写场景 2 以便创建新函数仅在捆绑文件中一次，但不是每次组件渲染和重新渲染时？有可能吗？

编辑：

param1 和 param2 是我自己的自定义值。

【问题讨论】：

@OriDrori 如果我想将数据值作为道具传递，我可以在没有箭头函数的情况下传递，但是当我们使用一些外部库时，我也想传递事件以及参数，它们提供 id，名称我们无法使用 event.target.name 或 id 但需要像 (e, id, name) => this.handleChange(e, id, name) 这样传递，所以这些情况下它每次都会创建一个新函数那么如何处理这种情况是我的问题
我添加了一个答案来证明你的情况。如您所见，不需要箭头函数。
@CertainPerformance - 我重新打开了这个问题，因为您提到的重复项实际上并没有解决 OPs 案例。

标签： javascript reactjs react-native ecmascript-6 ecmascript-5

【解决方案1】：

如果目标组件可以传递多个参数（input 显然不能），那么您的第二种情况无需箭头函数即可工作：

 render(){
    const { value } = this.state;
    return(
      <div>
        <CustomInput type="text" onChange={this.handleChange} value={value} />
      </div>
    )
 }

例子：

class CustomInput extends React.Component {
  constructor(props) {
    super(props);
    
    this.inputHandleChange = this.inputHandleChange.bind(this);
  }
  
  inputHandleChange(e) {
    this.props.onChange(e, e.target.value.length, 'param2');
  }
  
  render() {
    return (
      <input {...this.props} onChange={this.inputHandleChange} />
    );
  }
}

class InputWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      value: ""
    }
  }

  handleChange(e, param1, param2) {
    console.log(e.target.value, param1, param2);
    
    this.setState({
      value: e.target.value
    });
  }

  render() {
    const {
      value
    } = this.state;
    return (
      <div>
        <CustomInput type="text" onChange={this.handleChange} value={value} />
      </div>
    )
  }
}

ReactDOM.render(
  <InputWrapper />,
  demo
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>


<div id="demo"></div>

【讨论】：