react-select ：选项 isSelected 始终为真

Question

未选择任何内容时

当没有选择任何东西时，它工作得很好。

选中一个选项时（问题）

正如你在上面看到的，即使我选择了一个选项（ash），它也说所有都被选中了。我做了 console.log(isSelected)，它说所有内容都已选择 true ..

应该是这样的...

react-select selected props

我复制了很多代码，修改了几行。

这是我的代码

在此先感谢您对我的帮助！

有什么建议可以打我哦！

const dot = (color = '#ccc') => ({
  display: 'flex',
  alignItems: 'center',

  ':before': {
    backgroundColor: color,
    borderRadius: 10,
    content: '" "',
    display: 'block',
    marginRight: 10,
    height: 15,
    width: 15,
  },
});

const colourStyles = {
  control: (styles, { selectProps: { width } }) => ({
    ...styles,
    width: width,
  }),
  option: (styles, { data, isSelected, isFocused }) => {
    const color = chroma(data.color);
    return {
      ...styles,
      backgroundColor: isSelected
        ? data.color
        : isFocused
        ? color.alpha(0.1).css()
        : null,
      color: isSelected
        ? chroma.contrast(color, 'white') > 2
          ? 'white'
          : 'black'
        : data.color,
    };
  },
  input: (styles) => ({ ...styles, ...dot() }),
  placeholder: (styles) => ({ ...styles, ...dot() }),
  singleValue: (styles, { data }) => ({ ...styles, ...dot(data.color) }),
};


const SelectModule = observer(({ label, value }) => {
  const [selectedOption, setSelectedOption] = useState('');

  const options = colorChipListStore.colorList.map((item) => ({
    color: item.hexId,
    label: item.label,
  }));


  const setColors = (color) => {
    setSelectedOption(color);
  };

  function customTheme(theme) {
    return {
      ...theme,
      colors: {
        ...theme.colors,
        primary: '#AD9EE5',
      },
    };
  }


return (
    <Container>
      {label && <Label>{label}</Label>}
      <OptionWrapper>
          <Select
            width='100%'
            options={options}
            styles={colourStyles}
            theme={customTheme}
            isSearchable
            onChange={setColors}
            defaultValue={selectedOption}
          />
      </OptionWrapper>
    </Container>
  );
});

Answer 1

您的选项对象没有值键。我也得到了这个但是当我将选项更改为格式时：选项 = [{标签：''，值：''}] 我能够选择正确的选项。默认行为是使用 'value' 键来检查所选选项。您可以通过使用 'isOptionSelected' 并将选项重置为您想用作检查的任何键来更改此行为。您还可以为对象添加值。

看到这个GitHub issue。

react-select ：选项 isSelected 始终为真

react-select : the option `isSelected` is always true

reactjs

react-select

未选择任何内容时

选中一个选项时（问题）

应该是这样的...

这是我的代码