Question

所以，我遇到了这个问题：我在这里有这种类型的Element，很明显，在更改输入时会发生事件，是否可以传递这样的参数并访问事件？如果是这样，我该怎么办？

// 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)} />

Answer 1

您可以使用咖喱函数来实现。

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

...

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

Answer 2

如果需要，可以将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属性需要一个函数，因此，如果该函数返回，则只能像这样在onChange内部执行一个函数另一个功能。（这被称为高阶函数）。

Answer 3

您可以将处理程序转换为咖喱的高阶函数，以返回将用作接受click事件对象的回调的函数

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)} />

如何在React中将其他参数传递给onChange函数

3 个答案: