javascript - Removing element from drop-down react-select - Stack Overflow

admin管理员组

文章数量:1417691

I am using react-select with multi select option enabled. I want to add element after selecting option from the given list. Also if clicked on "x" (cross, which es with selected option in input list) I want to delete that element from the selected input list. I am able to add element in the list using onChnage event, however, not sure how can I remove it. I thought react-select ponent should have some callback method to remove the element from the selected-list but I am not able to find it on github as well. The link that they have provided for multiselect is as below and I want something exactly like this: / (Check multi-select in this). I am attaching my html code snippet here:

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

Can someone help me in this. It will be better if I can use react in-buil callback method instead of manually handling remove logic.

Thanks in advance.

I am using react-select with multi select option enabled. I want to add element after selecting option from the given list. Also if clicked on "x" (cross, which es with selected option in input list) I want to delete that element from the selected input list. I am able to add element in the list using onChnage event, however, not sure how can I remove it. I thought react-select ponent should have some callback method to remove the element from the selected-list but I am not able to find it on github as well. The link that they have provided for multiselect is as below and I want something exactly like this: https://jedwatson.github.io/react-select/ (Check multi-select in this). I am attaching my html code snippet here:

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

Can someone help me in this. It will be better if I can use react in-buil callback method instead of manually handling remove logic.

Thanks in advance.

• javascript
• html
• reactjs
• multi-select
• react-select

Share Improve this question Follow edited Oct 14, 2017 at 18:16 Nilakshi Naphade asked Oct 14, 2017 at 8:16 Nilakshi NaphadeNilakshi Naphade 1,08544 gold badges1414 silver badges3030 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Adding and removing elements BOTH trigger the onChange event with an array of currently selected values as a parameter.

For instance if my onChange handler is, say, chooseAnimal and my options are ["Mouse", "Cat", "Dog", "Duck"], when I select "Cat" then I will trigger chooseAnimal(["Cat"]). If I then select "Mouse", I'll trigger chooseAnimal(["Cat", "Mouse"]). And if I decide to remove "Cat", I'll trigger chooseAnimal(["Mouse"]).

So say I have a simple state with a chosenAnimals array, my chooseAnimal handler would be very simple:

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

In your own code, would the following work?

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

Considering the structure of your market object, this is how you would set the options in your Select tag:

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

What map does it that it'll iterate over your markets array and create a new array formed of value & label pairs for each element in the original markets array, and set the value to the id of that market element, and the label to the name of that same market element. Now the onChange handler should receive an array containing only market ids.

本文标签： javascriptRemoving element from dropdown reactselectStack Overflow