使用自定义渲染器获取 Antd AutoComplete 中选定选项的值

Question

我有一个 Antd AutoComplete 控件，它使用自定义渲染器，非常类似于这个分叉沙箱中的渲染器：https://codesandbox.io/s/lookup-patterns-certain-category-antd4140-forked-c9cxi

为简单起见，我们假设呈现的项目如下所示：

const renderItem = ({ id, name }) => ({
  value: id.toString(),
  label: (
    <div>
      {name}
    </div>
  )
});

我的目标是获取 renderItem 实例的文本值 {name} 并在 parent 组件中使用它。

自动完成输入值链接到实际的 Input.Search 组件

<AutoComplete
  value={displayedSearchValue}
  dropdownClassName="certain-category-search-dropdown"
  dropdownMatchSelectWidth={500}
  onSelect={handleSelect}
  style={{
    width: 250
  }}
  options={options}
>
  <Input.Search
    size="large"
    placeholder="input here"
    onChange={(e) => setDisplayedSearchValue(e.target.value)}
  />
</AutoComplete>

这是有原因的，当您单击并 select 一个条目时，AntD 将显示该记录的 value。在我的例子中，值必须是唯一标识符，或者我可以简单地使用标题。

现在，在平面列表中，我可以简单地提取 handleSelect 中的 selected 值并完成它：

const handleSelect = (value, option) => { setDisplayedSearchValue(option.label) }

这将解析 design-quirk，并且将显示标签而不是值。现在，使用我的嵌套和分组数据源，该项目实际上是一个组件，option.label 不再是一个字符串，而是一个反应组件，我必须向下钻取以获取实际值：

const handleSelect = (value, option) => {
    setDisplayedSearchValue(option.label.props.children);
};

如果文本值之间有空格，children 变成一个数组，我必须 .join('')，这增加了更多的复杂性。如果我更改标记并且 nest 在 dom 中更靠下，我将不得不对 parent select 或再次进行修改，这很容易出错，因为它将成为option.label.props.children.props.children.join('') 很快，如果客户希望搜索结果更加活跃

感觉我在基本层面上做错了什么，在这里做出反应，以实现我想要的。所以问题是：当我从 parent 组件中单击它时，如何从 child 组件中获取特定的属性？

Answer 1

所以实现它的最简单方法似乎是简单地向项目添加一个额外的属性 name。它会被 antd 忽略，但你仍然可以在 onSelect 处理程序中访问它：

const renderItem = ({ id, name }) => ({
  name,
  value: id.toString(),
  label: (
    <div>
      {name}
    </div>
  ),
});

然后在处理程序中：

const handleSelect = (value, option) => setDisplayedSearchValue(option.name);

使用自定义渲染器获取 Antd AutoComplete 中选定选项的值

Getting the value of a selected option in Antd AutoComplete with custom renderer

javascript

reactjs

antd