如何在 React-Select 中将删除 (X) 按钮添加到我的自定义组件 MultiValue？

Question

目标是在多选选项列表中添加一个图标，并在选择选项时显示该图标。我遇到的问题是 "x" 删除按钮丢失了。如何将其包含在我的自定义 MultiValue 中？

const customMultiValue = ({ props, data }) => {
  return (
    <div className='input-select'>
      <div className='input-select__multi-value'>
        {data.icon && <FontAwesomeIcon
          icon={data.icon.fa}
          color={data.color}
        />} <span>{data.label}</span>
      </div>
    </div>
  );
};

<Select
    isMulti
    closeMenuOnSelect={false}
    onChange={this.handleSetStatus}
    options={healthMonitoringStore.statuses}
    components={{ MultiValue: customMultiValue, Option: IconOption } }
    placeholder={'Filter Status'}
/>

我试过使用 MultiValueRemove，但格式很奇怪而且图标不可点击。

const customMultiValue = ({ props, data }) => {
  return (
    <div className='input-select' {...props}>
      <div className='input-select__multi-value'>
        {data.icon && <FontAwesomeIcon
          icon={data.icon.fa}
          color={data.color}
          fixedWidth />} <span>{data.label}</span>
        <components.MultiValueRemove {...props}></components.MultiValueRemove>
      </div>
    </div>
  );
};

不确定我的方向是否正确。

Answer 1

我自己修好了。

我需要 MultiValueLabel 而不是 MultiValue.

如何在 React-Select 中将删除 (X) 按钮添加到我的自定义组件 MultiValue？

How do I add Remove (X) button to my custom components MultiValue in React-Select?

reactjs

react-select