代码之家 › 专栏 › 技术社区 › Nilakshi Naphade

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

react-select multi-select reactjs html javascript

Nilakshi Naphade · 技术社区 · 7 年前

我正在使用启用了多选选项的react select。我想在从给定列表中选择选项后添加元素。此外,如果单击“x”(输入列表中所选选项随附的十字),我想从所选输入列表中删除该元素。我可以使用onChnage事件在列表中添加元素,但不确定如何删除它。我认为react select组件应该有一些回调方法来从所选列表中删除元素,但我也无法在github上找到它。他们为multiselect提供的链接如下所示,我想要一个完全一样的链接: 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})
    });
  }

有人能帮我吗。如果我可以在buil回调方法中使用react,而不是手动处理remove逻辑,那会更好。

提前谢谢。

1 回复 | 直到 7 年前

Thomas Hennes 7 年前

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

例如,如果我的 onChange公司 比如说,handler, chooseAnimal 我的选择是 ["Mouse", "Cat", "Dog", "Duck"] ,当我选择“Cat”时,我将触发 chooseAnimal(["Cat"]) . 如果我选择“鼠标”,我会触发 chooseAnimal(["Cat", "Mouse"]) . 如果我决定删除“猫”,我会触发 chooseAnimal(["Mouse"]) .

假设我有一个简单的状态 chosenAnimals 选择动物 处理程序将非常简单:

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 });
}

考虑到你的市场对象的结构,这就是你将如何设置 options

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

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