时间戳

首页 > 解决方案 > 删除动态添加的项目 [react-select]

react-select - 删除动态添加的项目 [react-select]

问题描述

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

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

我知道以编程方式添加/删除项目的代码。这只是更新状态的一个例子。我坚持的事情是如何将 UI 添加到 react-select 下拉面板并在单击时触发单击事件。

标签： react-select

解决方案

根据文档，您可以替换.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)}>&times;</span>到 CustomOption 组件并使用 cssposition: absolute等将其放置在您想要的位置并设置样式，最好是通过className

推荐阅读