优雅解决Ant Design Select 回显值展示与标签隐藏问题

2023-10-20 08:39:19

ant design select 回显显示value值不回显 label

回显值展示

当用户在Select组件中选择了一个选项后，该选项的value值将被保存在组件的value属性中。如果需要在组件中显示这个value值，可以使用value属性，如下所示：

<Select value={selectedValue} />

这将显示所选选项的value值作为Select组件的标签。

不回显标签

在某些情况下，可能需要隐藏Select组件的标签，只显示所选选项的值。这可以通过将showSearch属性设置为false来实现，如下所示：

<Select value={selectedValue} showSearch={false} />

这将隐藏Select组件的标签，只显示所选选项的值。

注意事项

在使用Select组件回显值展示或隐藏标签时，需要特别注意以下几点：

value属性只能显示所选选项的value值，无法显示其label值。
showSearch属性只能隐藏Select组件的标签，无法隐藏其value值。
如果需要同时隐藏Select组件的标签和value值，可以使用disabled属性。

示例代码

以下是一个完整的示例代码，演示如何在Ant Design Select组件中实现回显值展示和标签隐藏的功能：

import React, { useState } from 'react';
import { Select } from 'antd';

const options = [
  { value: '1', label: '选项 1' },
  { value: '2', label: '选项 2' },
  { value: '3', label: '选项 3' },
];

const App = () => {
  const [selectedValue, setSelectedValue] = useState('1');

  const handleSelectChange = (value) => {
    setSelectedValue(value);
  };

  return (
    <div>
      <Select value={selectedValue} onChange={handleSelectChange}>
        {options.map((option) => (
          <Select.Option key={option.value} value={option.value}>
            {option.label}
          </Select.Option>
        ))}
      </Select>

      <Select value={selectedValue} showSearch={false} />
    </div>
  );
};

export default App;