Question

我想根据提供的选项来修改singleValue对象中“选定的” styles颜色。

  const statusOptions = [
    { value: "NEW", label: i18n._(t`NEW`) },
    { value: "DNC", label: i18n._(t`DNC`) },
    { value: "WON", label: i18n._(t`WON`) },
    { value: "LOST", label: i18n._(t`LOST`) },
  ];

例如，如果在“新建”中选择了该选项，则我希望字体颜色为红色，如果为“ WON”，则为绿色，依此类推。我在将if语句放入样式对象时遇到麻烦。我发现放入三元语句很简单，但是如何添加更多的“复杂”逻辑呢？

  const customStyles = {
    ...
    singleValue: (provided) => ({  
      ...provided,
      color: 'red' <----- something like if('NEW') { color: 'green' } etc..
    })
  };

Answer 1

使用样式图对象：

import React from 'react';
import Select from 'react-select';

const statusOptions = [
  { value: 'NEW', label: 'NEW' },
  { value: 'DNC', label: 'DNC' },
  { value: 'WON', label: 'WON' },
  { value: 'LOST', label: 'LOST' },
];

const styleMap = {
  NEW: 'red',
  DNC: 'blue',
};

const colourStyles = {
  singleValue: (provided, { data }) => ({
    ...provided,
    color: styleMap[data.value] ? styleMap[data.value] : 'defaultColor',
    // specify a fallback color here for those values not accounted for in the styleMap
  }),
};

export default function SelectColorThing() {
  return (
    <Select
      options={statusOptions}
      styles={colourStyles}
    />
  );
}

根据选项反应选择更改singleValue颜色

1 个答案: