Question

我有一个react组件，我想用不同的参数调用同一个箭头函数，但是我一直坚持如何将参数传递给它，现在我在问自己可以这样做吗？


function Register(props) {

  const handleChange = (event) => {
    // here i want receive multiple arguments here eg. fromText1, fromText2
  }

  return (
        <React.Fragment>
           <TextField
           ...
           onChange={handleChange} // handleChnage('fromText1');
          />

          <TextField
           ...
           onChange={handleChange} // handleChnage('fromText2');
          />
         ....
        </React.Fragment>

   );
}

Answer 1

只需执行以下双箭头功能：

const [state, setState] = React.useState({})
const handleChange = name => e => {
    setState({
        ...state,
        [name]: e.target.value
    })
}

// later in your code

<TextField
    ...
    onChange={handleChnage('fromText1')}
/>

// this will cause the change of value of formText1 in your state

Answer 2

您有几个选择，但是React功能组件中的典型解决方案是使用箭头函数包装器：

onChange={e => handleChange(e, "fromText1")}

这样，第一个参数将是事件对象，第二个参数将是字符串"fromText“。

或者，您可以使用bind：

onChange={handleChange.bind(null, "fromText1")}

这样，第一个参数将是字符串"fromText“，第二个参数将是事件对象。

事件对象还具有几个方便的属性，例如target（事件针对的DOM元素）和currentTarget（事件处理程序所附加的DOM元素）— React synthesizes这有点，因为它在内部使用委派）。

如何将参数传递给箭头函数javascript

2 个答案: