javascript - 从下拉 react 选择中删除元素

Question

我正在使用启用了多选选项的 react 选择。我想在从给定列表中选择选项后添加元素。另外，如果单击“x”(十字，输入列表中的选定选项附带)，我想从选定的输入列表中删除该元素。我可以使用 onChnage 事件在列表中添加元素，但是，不确定如何删除它。我认为 react 选择组件应该有一些回调方法来从选定列表中删除元素，但我也无法在 github 上找到它。他们为多选提供的链接如下，我想要这样的东西:https://jedwatson.github.io/react-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内置回调方法而不是手动处理删除逻辑，那就更好了。

提前致谢。

Answer 1

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

例如，如果我的 onChange 处理程序是 chooseAnimal 并且我的选项是 ["Mouse", "Cat", "Dog", "Duck "]，当我选择“Cat”时，我将触发 chooseAnimal(["Cat"])。如果我随后选择“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={this.props.metadata ? this.props.metadata["latest"].markets.map(m => return {value: m.id, label: m.default_name}) : []}

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