React-Select实现菜单选中项显示勾选图标问题求助

你需要利用react-select自定义Option组件传入的state参数，通过state.isSelected判断当前选项是否被选中，以此控制勾选图标的显示与否。

修改你的IconOption组件即可实现需求：

const ReactSelect = ({ isMulti, options, value, onChange, inputRef, name }) => {
  const { Option } = components;
  const IconOption = (props) => (
    <Option {...props}>
      {/* 仅当选项被选中时渲染勾选图标 */}
      {props.state.isSelected && <CheckIconSC />}
      {props.data.label}
    </Option>
  );
  return (
    <>
      <Select
        isClearable={false}
        isMulti={isMulti}
        styles={customStyles}
        options={options}
        placeholder="Select one option"
        components={{
          IndicatorSeparator: () => null,
          Option: IconOption,
        }}
        value={value}
        onChange={onChange}
        inputRef={inputRef}
        name={name}
      />
    </>
  );
};

关键说明 #

react-select在渲染自定义Option组件时，会自动传入包含当前选项状态的state对象，其中isSelected字段为布尔值：

• 当isSelected为true时，说明该选项已被选中，此时渲染勾选图标
• 为false时则不渲染图标，这样就不会出现所有选项都显示图标的问题

内容的提问来源于stack exchange，提问作者Emanuel Maričić