反应选择多选一选项无法清除答案

【问题标题】：React select multi select one option not clearable反应选择多选一选项无法清除
【发布时间】：2021-07-21 22:40:04
【问题描述】：

我在我的项目中使用react-select。我有它用于多项选择，它看起来像这样：

而且效果很好。问题是我希望已经选择了一个选项，并且它无法清除，因此它附近不会有“X”

我只需要一个选项，所有其他选项都必须通常在选项中并且可以清除。我怎样才能做到这一点？它是添加到选项中的特殊道具，还是我可以通过某种方式检查它们，如果选项名称为commercial，它将无法清除并且会在初始时被选中

【问题讨论】：

【解决方案1】：

react-select 在文档中有一个fixed options 示例，但我发现这个解决方案更简洁。您可以根据选项值删除MultiValueRemove组件（删除按钮）：

const MultiValueRemove = (props) => {
  if (props.data.isFixed) {
    return null;
  }
  return <components.MultiValueRemove {...props} />;
};

export default () => {
  return (
    <Select
      isMulti
      defaultValue={[colourOptions[0], colourOptions[1]]}
      isClearable={false}
      options={colourOptions}
      components={{ MultiValueRemove }}
    />
  );
};

上面的选择将删除任何将isFixed 属性设置为true 的选项的删除按钮（下面的前两个选项）。

export const colourOptions = [
  { value: 'ocean', label: 'Ocean', color: '#00B8D9', isFixed: true },
  { value: 'red', label: 'Red', color: '#FF5630', isFixed: true },
  { value: 'purple', label: 'Purple', color: '#5243AA' },
  { value: 'orange', label: 'Orange', color: '#FF8B00' },
  { value: 'yellow', label: 'Yellow', color: '#FFC400' },
  { value: 'green', label: 'Green', color: '#36B37E' },
  { value: 'forest', label: 'Forest', color: '#00875A' },
  { value: 'slate', label: 'Slate', color: '#253858' },
  { value: 'silver', label: 'Silver', color: '#666666' },
];

现场演示

【讨论】：

具有不可清除选项的东西正在工作，但我在设置 defaultValue 时遇到问题，它没有像 defaultValue 道具那样设置，我有创建选项的函数，所以我将相同的函数传递给 defaultValue 和当然取它的第一个元素 [0] 但它没有按预期工作，初始时没有设置任何值
@Sowam 你能分叉我的代码框来制作一个可重复的例子吗？您还需要将您的defaultValue 代码添加到问题中，以便其他人可以帮助您。

【解决方案2】：

您可以使用 isClearable 的 react-select 属性删除它，如下所示

考虑您的选项数组已将 fixed 布尔值设置为 true

<Select
  // other props
  isClearable={options.some(v => !v.isFixed)}
/>

你可以像这样改变你的multiValueRemove const 样式

const styles = {

  // other styles here

  multiValueRemove: (base, state) => {
    return state.data.isFixed ? { ...base, display: 'none' } : base;
  },
};

您可以在https://react-select.com/home#fixed-options 的Fixed option 部分找到更多信息

【讨论】：

【解决方案3】：

试试这个：

export const CreatingSelect: FC<CreatingSelectProps> = (props) => {
    const { className, components, ...restProps } = props;
    const selectClassName = cn('select', className);

    const MultiValueRemove = (props: PropsWithChildren<any>) => {
        return (
            <div className={props.innerProps.className} onClick={props.innerProps.onClick}>
                <SvgIcon name={iconNames.cross} />
            </div>
        );
    };

    return (
        <SelectStyled
            styles={customStyles}
            className={selectClassName}
            classNamePrefix='select'
            components={{ ...components, MultiValueRemove }}
            {...restProps}
        />
    );
};

【讨论】：

请添加一些文本来支持您的代码