如何从 react-select 输入中删除 selected 符号？

Question

我正在使用 react-select 并使用 formatOptionLabel 属性来格式化选项标签。每当我 select 任何选项时，它都会显示在输入中，并且它也会得到格式化的标签

我尝试传递 selectedIcon 并在 onChange 事件中将其删除并且确实有效，但为此我需要在每个选项中传递它并在每个 onChange 中删除。

这是 handleValueChange

handleChange = (value) => {
    const { selectedIcon, ...restFields } = value;
    this.setState({
      someKey: restFields
    });
};

这是我用过的formatLabel函数

const formatLabel = (data, restFields) => {
  if (restFields.selectValue[0].value === data.value) {
    return (
      <div>
        {data.selectedIcon}{data.icon}{data.label}
      </div>
    )
  } else {
    return (
      <div>
        {data.icon}{data.label}
      </div>
    )
  }
};

有没有一种方法可以在菜单未打开时以不同方式设置 selected 值的格式。而且我还需要对它们应用不同的样式。

例如：我想在 selected 值之前在选项菜单中显示 ✔️，当菜单关闭时它应该只显示 selected 值。

Answer 1

对于样式，您可以使用 styling api 分别为每个组件设置样式。它提供初始样式（在文档中为 provided）和提供的道具（在文档中为 state）作为参数，并且 returns 样式 object.

<Select
    { ... }
    styles={{
        option: (provided, state) => ({
            ...provided,
            // Your styles here
        }),
        singleValue: (provided, state) => ({
            ...provided,
            // Your styles here
        })
    }}
/>

如果您只想在所选选项上呈现复选标记，您可以使用样式 api 和伪元素来实现。

{
    ...provided,
    '&:before': {
        fontFamily: "FontAwesome" // For example
        content: "\f00c"
    }
}

另一种方法是使用components framework覆盖Optionand/orSingleValue（或MultiValue）组件（两者都使用[的结果=18=]作为他们的直接 React child).

const Option = ({ children, ...props }) => <components.Option { ...props }>
    {/* I'll do it my way */}
    { customLabelFormat(props.data) }
    {/* Or like this as per your request */}
    { props.isSelected && <CheckMark /> }
    { children } // To keep default label format as an example
</components.Option>;

<Select
    { ... }
    components={{
        Option
    }}
/>

如何从 react-select 输入中删除 selected 符号？

How to remove selected symbol from react-select input?

select

input

options

reactjs

react-select