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

Question

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

我尝试传递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）组件（两者都使用formatOptionLabelas他们的直接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
    }}
/>