React Antd v4 自动完成在选择选项时显示所选值而不是标签

JS

React Antd v4 是一个流行的React UI组件库，它提供了丰富的组件和功能，以帮助开发者更轻松地构建用户界面。其中一个非常有用的组件是自动完成（AutoComplete），它可以在用户输入时提供匹配的选项供选择。不过，默认情况下，当用户选择一个选项时，自动完成组件会显示选项的标签而不是所选的值。本文将介绍如何在选择选项时显示所选值而不是标签，并提供一个案例代码来演示这个功能。

要实现在选择选项时显示所选值而不是标签，我们需要借助Antd的AutoComplete组件的一个属性，即optionLabelProp。通过设置optionLabelProp为所选值的字段名，我们可以指定在选择选项时显示该字段的值。下面是一个示例代码：

JSx
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
const options = [
  { value: 'Apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];
const App = () => {
  const [value, setValue] = useState('');
  const handleSelect = (selectedValue) => {
    setValue(selectedValue);
  };
  return (
    <AutoComplete</p>      options={options}
      onSelect={handleSelect}
      optionLabelProp="value"  // 设置optionLabelProp为"value"
      value={value}
    />
  );
};
export default App;

在这个例子中，我们创建了一个AutoComplete组件，并传入了一个options数组作为选项。每个选项都有一个value字段和一个label字段，我们希望在选择选项时显示value字段的值。

在App组件中，我们使用useState来保存AutoComplete的值，并在handleSelect函数中更新它。当用户选择一个选项时，handleSelect函数会被调用，并将所选值作为参数传递进来，我们通过setValue函数将其设置为当前的值。

最后，我们将AutoComplete组件的optionLabelProp属性设置为"value"，以指定在选择选项时显示value字段的值。这样，当用户选择一个选项时，所选值就会显示在AutoComplete组件中。

案例代码实现了在选择选项时显示所选值而不是标签的功能，并且可以根据实际需求进行灵活的修改和扩展。

一下，使用React Antd v4的AutoComplete组件可以很方便地为用户提供选择选项的功能。通过设置optionLabelProp属性为所选值的字段名，我们可以实现在选择选项时显示所选值而不是标签。这个功能对于一些特定的应用场景非常有用，特别是当选项的标签和值不一致时。希望本文对您理解如何使用React Antd v4实现这一功能有所帮助。

参考代码：

JSx
import React, { useState } from 'react';
import { AutoComplete } from 'antd';
const options = [
  { value: 'Apple', label: 'Apple' },
  { value: 'banana', label: 'Banana' },
  { value: 'cherry', label: 'Cherry' },
];
const App = () => {
  const [value, setValue] = useState('');
  const handleSelect = (selectedValue) => {
    setValue(selectedValue);
  };
  return (
    <AutoComplete</p>      options={options}
      onSelect={handleSelect}
      optionLabelProp="value"  // 设置optionLabelProp为"value"
      value={value}
    />
  );
};
export default App;