Question

我正在使用react-select，并使用formatOptionLabel道具来格式化选项标签。每当我选择任何选项时，它都会显示在“输入”中，并且还会获取该格式化的标签

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

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

1 个答案: