Question

我正在使用react-select并启用了多选选项。我想在给定列表中选择选项后添加元素。如果点击＆＃34; x＆＃34; （cross，它带有输入列表中的选定选项）我想从所选输入列表中删除该元素。我可以使用onChnage事件在列表中添加元素，但是，不知道如何删除它。我认为react-select组件应该有一些回调方法从selected-list中删除元素，但我也无法在github上找到它。他们为multiselect提供的链接如下所示，我想要这样的内容：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 in-buil回调方法而不是手动处理删除逻辑，那会更好。

提前致谢。

Answer 1

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

例如，如果我的onChange处理程序是chooseAnimal而我的选项是["Mouse", "Cat", "Dog", "Duck"]，那么当我选择＆＃34; Cat＆＃34;然后我会触发chooseAnimal(["Cat"])。如果我然后选择＆＃34;鼠标＆＃34;，我将触发chooseAnimal(["Cat", "Mouse"])。如果我决定删除＆＃34; Cat＆＃34;，我会触发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它会对您的市场数组进行迭代，并创建一个由值＆amp;原始市场数组中每个元素的标签对，并将值设置为该市场元素的id，并将标签设置为同一市场元素的名称。现在onChange处理程序应该接收一个只包含市场ID的数组。

从下拉列表中删除元素react-select

1 个答案: