React-select 选项显示默认的蓝色背景

Question

我使用反应选择创建了一个选择组件。我需要将徽章附加到可用值为 false 的选项。我已经使用-实现了它

  const formatOptionLabel = ({ code, name, available }) => (
      <div className="ds-select-distibutor-step-container format-option" style={{ display: "flex", cursor:"none" }}>
        <div>{name}</div>
        {!available ?
        <div className="format-label" style={{ borderRadius: "12px" ,marginLeft: "auto", color: "#fff" , backgroundColor: "#aaa", padding: "2px 10px", fontSize:"12px"}}>
        <span>Coming Soon</span>
        </div>
        : ''}
      </div>
     );

以下 json 在运行时出现，我将其映射并用作选项 -

const options= [
    {code:"abc",name:"abc",rank:0,available:true},
    {code:"xyz",name:"xyz",rank:0,available:false},
    {code:"pqr",name:"pqr",rank:0,available:true}]

以下是我的自定义选择组件

     <Field 
              id="selectedDistributor"
              name="selectedDistributor" 
              component={customSelect} 
              options={sortBy(options, 'name').map(({ code, name, available}) => ({ code, name, available }))}
              formatOptionLabel={formatOptionLabel}
              className="select-step"
              placeholder="abc"
              touched={false}
              defaultValue="abc"
              requiredField
              >
    </Field>
    
    
     <FieldWrapper
        label={label}
        requiredField={requiredField}
        touched={touched}
        forId={inputId}
        >
        <Select
          {...input}
          id={inputId}
          disabled={isEditMode || disabled}
          onChange={value => input.onChange(value.code)}
          formatOptionLabel={formatOptionLabel}
          options={options}
          placeholder={placeholder}
          value={input.code}
          className={`input-components-select ${className}`}
        >
          </Select>
        </FieldWrapper>

enter code here

一切都几乎正常，但是当我选择该选项时，所有选项的背景都变成蓝色，我尝试进行更改，发现如果我将“值”作为 JSON 的键而不是选项中的“名称”传递，则会出现此错误消失了。但我无法使用它，因为 json 来自后端及其动态。

有人可以建议应该做什么才能使背景不改变吗？我已附上图片供参考

第一次

选择后

Answer 1

我遇到了同样的问题，我发现你需要声明一个函数getOptionValue作为 Select 的 props。在你的例子中，它应该是这样的

<Select
   {...input}
   id={inputId}
   disabled={isEditMode || disabled}
   onChange={value => input.onChange(value.code)}
   formatOptionLabel={formatOptionLabel}
   options={options}
   placeholder={placeholder}
   value={input.code}
   getOptionValue={(option) => option.code} // changes here!!!
   className={`input-components-select ${className}`}
   >
</Select>

该功能用于比较以突出显示列表中当前选定的选项。您可以在此处的讨论中查看更多详细信息 https://github.com/JedWatson/react-select/issues/3388