如何将参数传递给箭头函数javascript [重复]答案

【问题标题】：How pass arguments to arrow function javascript [duplicate]如何将参数传递给箭头函数javascript [重复]
【发布时间】：2023-03-03 09:26:20
【问题描述】：

我有一个反应组件，我想用不同的参数调用相同的箭头函数，但我一直纠结于如何将参数传递给它，现在我在问自己我能做到吗？


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>

   );
}

【问题讨论】：

谢谢@devserkan，我应该知道有一个很好的欺骗目标。

标签： javascript reactjs

【解决方案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

【讨论】：

【解决方案2】：

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

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

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

或者，您可以使用bind：

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

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

事件对象还有一些方便的属性，例如target（事件所针对的 DOM 元素）和 currentTarget（附加事件处理程序的 DOM 元素——React 将其综合为它在内部使用委托）。

【讨论】：

当然这点之前已经介绍过了。愚蠢地写下上面的答案，我会留下它而不是删除它，但我已经将它标记为 CW，所以人们不会误认为我这样做与代表有关。（CW 的答案不会创造代表。）