将附加参数传递给 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)}
 />

在这里你可以看到我们正在传递一个回调函数。请注意，在上面的代码片段中，我们无法访问 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

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

Pass additional params to onSelect method of React Ant Design Select component

reactjs

antd

ant-design-pro