将附加参数传递给 React Ant Design Select 组件的 onSelect 方法

Posted 2023-03-07

【中文标题】将附加参数传递给 React Ant Design Select 组件的 onSelect 方法

【英文标题】：Pass additional params to onSelect method of React Ant Design Select component

【发布时间】：2021-06-25 06:04:56

【问题描述】：

我需要向 AntD Select 组件的 onSelect 方法传递一个附加参数，该参数不能在选项对象数组中列出。我试图通过映射一个数组在 UI 上呈现几个 Select 组件，并且需要将呈现元素的索引传递给 onSelect 方法。根据文档，它只支持从onSelect 方法读取value 和options。有什么解决办法吗？

当前代码：

list.map(input, index) -> 
  return <Select 
          .....
          onChange=handleOnChange
          />


handelOnChange = (value, options) => 
  .....

预期代码：

list.map(input, index) -> 
  return <Select 
          .....
          onChange=handleOnChange(index)
          />

【问题讨论】：

你可以将任何你想要的传递给你的回调函数，你的第二个例子应该可以工作

【参考方案1】：

预期代码：

list.map(input, index) -> 
  return <Select 
          .....
          onChange=(value, options)=>handleOnChange(value, options, index)
          />

【参考方案2】：

我正在为@Babak 答案添加一些解释。

在您当前的代码中，您将一个事件处理程序 (handleOnChange) 传递给 Select 组件的 onChange onEvent 属性。

<Select 
     .....
     onChange=handleOnChange
 />

当 onChange 事件发生时，它将调用函数handleOnChange，并将该事件作为默认参数和其他参数

在您预期的代码中，您传递了handleOnChange(index) 函数的结果（因为括号我们说它进行函数调用并将结果传递给onChange 属性），但这不是我们的意图。我们必须将事件处理程序传递给 onChange 属性而不是它的结果。这是 REACT 中事件处理程序的黄金法则。

如果你想传递事件参数以外的参数，那么你需要这样做：

<Select 
   ....
   onChange=(value, options) => handleOnChange(value, options, index)
 />

在这里你可以看到我们正在传递一个回调函数。请注意，在上面的 sn-p 中，我们无法访问 handleOnChange 中的事件。如果您想在事件处理程序中包含一个事件以及其他参数，您可以这样做：

<Select 
    .....
   onChange=(event, value, options) => handleOnChange(event, value, options, index)
/>

一些有效的事件处理程序：

<button onClick=handleClick /> // valid and can access event
<button onClick=() => handleClick() /> // valid and access event
<button onClick=(event) => handleClick(event, name) /> // valid and access event and other parameters

【讨论】：

感谢您的精彩解释。我认为这对所有访问这里的开发者都有帮助。