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

Question

我需要向 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)}
          />
}

Answer 1

预期代码：

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

Answer 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