reactjs - 如何将删除 (X) 按钮添加到 React-Select 中的自定义组件 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。