从下拉反应选择中删除元素

Question

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

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 in-buil 回调方法而不是手动处理删除逻辑会更好。

提前致谢。

Answer 1

添加和删除元素都会触发onChange 事件，其中包含当前选定值的数组作为参数。

例如，如果我的onChange 处理程序是chooseAnimal，而我的选项是["Mouse", "Cat", "Dog", "Duck"]，那么当我选择“Cat”时，我将触发chooseAnimal(["Cat"])。如果我然后选择“鼠标”，我将触发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 的作用是遍历您的市场数组并为原始市场数组中的每个元素创建一个由值和标签对组成的新数组，并将值设置为该市场元素的 id，以及同一市场元素名称的标签。现在 onChange 处理程序应该收到一个仅包含市场 ID 的数组。