Блог

Итак, я столкнулся с этой проблемой: у меня здесь есть элемент такого типа, очевидно, что при изменении входных данных происходит событие, возможно ли передать такие параметры, как это, и получить доступ к событию? если да, то как я мог это сделать?

 // this function accepts two other params index, stringValue
function onChange(index ,stringValue) {
    console.log(event.target.value);
    console.log("index?: "   index   " and value"   stringValue)
}

//this input is in Child Component
const index = 69;
const someRandomValue='iamstring';
<input defaultValue={name} onChange={onChange(index,iamstring)} />
  

Вы можете использовать функцию curried для ее реализации.

 onChange = (index, stringValue) => (event) => {
...
}

...

<input defaultValue={name} onChange={this.onChange(index,iamstring)} />
  

Вы можете преобразовать обработчик в обработанную функцию более высокого порядка, чтобы вернуть функцию, которая будет использоваться в качестве обратного вызова, которая принимает объект события щелчка

 function onChange(index,stringValue) {
  return (event) => {
    console.log(event.target.value);
    console.log("index?: "   index   " and value"   stringValue)
  };
}
  

Или вы можете передать объект события через обратный вызов, не забудьте добавить объект события в качестве аргумента в обработчик

 function onChange(event, index ,stringValue) {
    console.log(event.target.value);
    console.log("index?: "   index   " and value"   stringValue)
}

<input defaultValue={name} onChange={e => onChange(e, index, iamstring)} />
  

Если вы хотите, вы можете превратить onChange в функцию, которая возвращает другую функцию.

Тогда вы можете сделать что-то вроде этого:

 const Element = () => {
  const index = 69;
  const iamstring = 'iamstring';

  const onChange = (index, stringValue) => event => {
    console.log(event.target.value);
    console.log('index?: '   index   ' and value'   stringValue);
  };

  return <input defaultValue={name} onChange={onChange(index, iamstring)} />;
};

  

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