时间戳

首页 > 解决方案 > 如何从反应选择输入中删除选定的符号？

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

问题描述

我正在使用react-selectand usedformatOptionLabel道具来格式化选项标签。每当我选择任何选项时，它都会显示在 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>
    )
  }
};

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

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

标签： reactjsselectinputoptionsreact-select

解决方案

对于样式，您可以使用样式 api单独设置每个组件的样式。它提供初始样式（在 docs as 中provided）和提供的 props（在 docs as 中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"
    }
}

另一种方法是使用组件框架覆盖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
    }}
/>

推荐阅读