从下拉反应中删除元素-select

Question

我正在使用启用了多个 select 选项的 react-select。我想在给定列表的 selecting 选项之后添加元素。此外，如果单击 "x"（交叉，输入列表中带有 selected 选项），我想从 selected 输入列表中删除该元素。我可以使用 onChnage 事件在列表中添加元素，但是，不确定如何删除它。我认为 react-select 组件应该有一些回调方法来从 selected-list 中删除元素，但我也无法在 github 上找到它。他们为 multiselect 提供的 link 如下所示，我想要完全像这样的东西： https://jedwatson.github.io/react-select/ （检查 multi-select ）。我在这里附上我的 html 代码片段：

createNewDeliveryData: {
                user_id: localStorage.getItem('userId'),
                //auth_token: localStorage.getItem('token'),
                is_listed: false,
                is_published: false,
                id:'',
                tags: [],
                languages: [],
                markets:[],
                order: 1,

            },
market = {
    default_name: "Deutschland"
    icon: "de"
    id:"44fc0d0c-d0ed-4013-924a-e15f4d589c83"
}

<If condition={!this.props.getDeliveryReqState}>
    <Select
    multi={true}
    name="form-field-name"
    options={this.props.metadata ? this.props.metadata["latest"].markets : []}
    labelKey="default_name"
    valueKey="id"
    onChange={this.addMarket}
    clearable={false}
    value={this.state.createNewDeliveryData.markets}
    />
</If>

addMarket = (value) => {    
    console.log("markets type",typeof(value))
    this.setState({
        createNewDeliveryData : {
            ...this.state.createNewDeliveryData,
            markets: value
        },
    },function () {
        this.setValue({id:"markets", value:this.state.createNewDeliveryData.markets, error:null})
    });
  }

有人可以帮助我吗？如果我能使用react内置回调方法而不是手动处理remove逻辑会更好

提前致谢。

Answer 1

添加和删除元素都会触发 onChange 事件，并将当前 selected 值的数组作为参数。

例如，如果我的 onChange 处理程序是 chooseAnimal，而我的选项是 ["Mouse", "Cat", "Dog", "Duck"]，当我 select "Cat" 时，我将触发chooseAnimal(["Cat"])。如果我然后 select "Mouse"，我将触发 chooseAnimal(["Cat", "Mouse"])。如果我决定删除 "Cat"，我将触发 chooseAnimal(["Mouse"]).

假设我有一个带有 chosenAnimals 数组的简单状态，我的 chooseAnimal 处理程序将非常简单：

chooseAnimals = (chosenAnimals) => {
  this.setState({ chosenAnimals });
}

在您自己的代码中，以下是否可行？

addMarket(markets) {
  this.setState({ createNewDeliveryData: Object.assign({}, createNewDeliveryData, { markets }) });
  // alternative form:
  // let { createNewDeliveryData } = this.state;
  // createNewDeliveryData.markets = markets;
  // this.setState({ createNewDeliveryData });
}

考虑到您的市场对象的结构，这就是您在 Select 标签中设置 options 的方式：

options={this.props.metadata ? this.props.metadata["latest"].markets.map(m => return {value: m.id, label: m.default_name}) : []}

map 的作用是遍历您的市场数组并为原始市场数组中的每个元素创建一个由值和标签对组成的新数组，并将值设置为该市场元素，以及该市场元素名称的标签。现在 onChange 处理程序应该收到一个仅包含市场 ID 的数组。

从下拉反应中删除元素-select

Removing element from drop-down react-select

html

javascript

multi-select

reactjs

react-select