react 如何知道必须将哪些参数传递给 onChange？答案

【问题标题】：How react knows which arguments has to be passed to onChange?react 如何知道必须将哪些参数传递给 onChange？
【发布时间】：2020-11-16 05:10:16
【问题描述】：

这是来自 github 页面的代码 sn-p

onChangeHandler = (input, value, files) => { 
    if (files) {
      generateBase64FromImage(files[0])
        .then((b64) => {
          this.setState({ imagePreview: b64 });
        })
        .catch((e) => {
          this.setState({ imagePreview: null });
        });
    }
    this.setState((prevState) => {
      let isValid = true;
      for (const validator of prevState.postForm[input].validators) {
        isValid = isValid && validator(value);
      }
      const updatedForm = {
        ...prevState.postForm,
        [input]: {
          ...prevState.postForm[input],
          valid: isValid,
          value: files ? files[0] : value,
        },
      };
      
      return {
        postForm: updatedForm,
        formIsValid: formIsValid,
      };
    });
  };

这样用于输入

        <Input
          id="title"
          label="Title"
          control="input"
          onChange={this.onChangeHandler}
        />

onCHangeHandler 被传递给 onChange 但没有任何参数，但代码正在运行。 react怎么知道，那些参数“输入、值、文件”是什么？

【问题讨论】：

Input 元素是什么？看起来像自定义输入。该组件内的onChange 可能定义了这些参数
您指的是哪个框架！在此处发布 github 链接

标签： reactjs forms onchange

【解决方案1】：

当回调的参数完全与处理程序的参数匹配时，无需分配匿名函数来简单地代理参数 1 对 1。在最简单的示例中，input的onChange 处理程序只传递onChange 事件对象，而回调只消耗事件对象，那么您可以简单地将回调附加到处理程序

const myCallback = event => { /* handle event object */ }

...

<input type="text" onChange={myCallback} />

要了解代理参数的含义，这里有一个几乎等效的版本

<input type="text" onChange={event => myCallback(event)} />

希望很明显，对于这种情况，使用匿名函数是多余的（甚至可能有点傻）只是为了运送一个变量来自handlerto回调的时候回调函数可以直接附加到handler上。

现在对于Input 组件和附加处理程序的情况，很明显Input 组件的onChange 处理程序按指定顺序将0 到3 个值传递给回调。

onChangeHandler = (input, value, files) => { /* callback logic */ }

...

<Input
  id="title"
  label="Title"
  control="input"
  onChange={(input, value, files) => this.onChangeHandler(input, value, files)}
/>

由于处理程序和回调函数签名匹配，我们可以直接将onChangeHandler回调附加到Input的onChange处理程序。

<Input
  id="title"
  label="Title"
  control="input"
  onChange={this.onChangeHandler}
/>

【讨论】：