Question

我试图实现事件处理函数，以避免每次组件class item<T> { constructor(a: T) { this.a = a; } a: T } const generateResult = Symbol.for("generate") interface item<T> { [generateResult] : <T>(a: T) => item<T> } type d = item<any>[typeof generateResult] type SupportsGeneration<R> = { [generateResult] : R } type ConstructorArguments<T> = T extends new (...a:infer A ) => any ? A : []; function generate<T extends { new (...a:any[]) : SupportsGeneration<any> }>(c:T) : InstanceType<T> extends SupportsGeneration<infer R> ? R: never function generate<T extends new (...a:any[]) => any>(c:T) : (a: ConstructorArguments<T>) => InstanceType<T> function generate(c: new (...a: any[]) => any) : any { return function a(...a: any[]) { return new c(...a); } } const factory = generate(item); const instance = factory('string');和renders都创建新的函数。

场景1：

如果我将函数绑定到如下所示的构造函数中，并且在re-renders中没有参数，它将仅在捆绑文件中创建一次新函数

onChange

场景2：

但是，当我想将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> ) }和some parameters一起传递给event函数时，如下所示，我相信每次组件handleChange和{{ 1}}

renders

所以

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

编辑：

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

Answer 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>

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

1 个答案: