Question

我正在使用react-select控件。下拉列表中显示的项目是固定项目加上动态添加的项目的组合。

我希望能够通过在标签旁边添加图标来直接在下拉面板中删除动态生成的项目。单击后，应删除该项目。

我知道以编程方式添加/删除项目的代码。这只是更新状态的一种情况。我遇到的问题是如何将UI添加到react-select下拉面板中，并在单击时触发click事件。

Answer 1

根据docs，您可以replace react-select中的选项组件。

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

const CustomOption = ({ innerProps }) =>
    <div {...innerProps}>{/* your component internals */}</div>

class Component extends React.Component {
  render() {
    return <Select components={{ Option: CustomOption }} />;
  }
}

这样，您可以将图标<span onClick={() => this.deleteOption(optionId)}>×</span>添加到CustomOption组件，并使用css position: absolute等将其放置在所需的位置并设置其样式，最好通过className

删除动态添加的项目[反应选择]

1 个答案: