Блог

это фрагмент кода со страницы github

 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 amp;amp; 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 знает, что это за аргументы «ввод, значение, файлы»?

Когда аргументы обратного вызова в точности совпадают с аргументами обработчика, тогда нет необходимости назначать анонимную функцию, чтобы просто прокси аргументы 1 для 1. В простейшем примере, когда input onChange обработчик передает только объект onChange события, а обратный вызов использует только объект события, вы можете просто присоединить обратный вызов к обработчику

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

...

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

Чтобы понять, что я имею в виду при передаче аргументов, вот почти эквивалентная версия

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

Надеюсь, ясно, что для этого сценария избыточно (может быть, даже немного глупо) использовать анонимную функцию только для передачи переменной из обработчика в обратный вызов, когда функция обратного вызова может быть напрямую подключена к обработчику.

Теперь, в случае Input компонента и подключенного обработчика, очевидно onChange , что обработчик Input компонента передает обратному вызову значения от 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}
/>