如何从反应选择输入中删除选定的符号？

Question

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

我尝试传递 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>
    )
  }
};

当菜单未打开时，有没有办法以不同的方式格式化所选值。而且我还需要对它们应用不同的样式。

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

Answer 1

对于样式，您可以使用styling api 单独设置每个组件的样式。它提供初始样式（在文档中为 provided）和提供的道具（在文档中为 state）作为参数并返回一个样式对象。

<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 覆盖Option 和/或SingleValue（或MultiValue）组件（两者都使用formatOptionLabel 的结果作为它们的直接React 子级）。

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
    }}
/>