Javascript 无法使用ant design和react更改multiselect的值
我开发了一个multiselect,通过它可以从后端获取他的值:Javascript 无法使用ant design和react更改multiselect的值,javascript,reactjs,select,multi-select,antd,Javascript,Reactjs,Select,Multi Select,Antd,我开发了一个multiselect,通过它可以从后端获取他的值: "jours": [ { "id": 1, "jour": "Lundi" }, { "id": 2, "jour": "Mardi" }, { "id": 3, "jour": "Mercredi"
"jours": [
{
"id": 1,
"jour": "Lundi"
},
{
"id": 2,
"jour": "Mardi"
},
{
"id": 3,
"jour": "Mercredi"
},
{
"id": 4,
"jour": "Jeudi"
},
{
"id": 5,
"jour": "Vendredi"
},
{
"id": 6,
"jour": "Samedi"
}
]
我的代码是:
jour:[], jours:[], joursId:[],
handleJourChange = (jour) => {
this.state.jours.map((jourId)=>{
this.state.joursId.push(""+jourId.id+"");
this.setState({
joursId: this.state.joursId
})
console.log(this.state.joursId)
if (jour.includes('all')) {
this.setState({ jour: this.state.joursId });
}
else {
this.setState({jour :jour});
}
})
}
<Select id="motif" name= "motif" mode="multiple" showArrow allowClear showSearch style={{ width: '535px' }} placeholder="Sélectionnez le(s) motif(s)" value={this.state.jour} onChange={this.handleJourChange}
optionFilterProp="children" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
<Option value="all">Sélectionner tout</Option>
{ this.state.id_user > 0 && this.state.jours.map((jour)=>
<Option key={jour.id} value={jour.id}>{jour.jour}</Option>
)}
</Select>
我的代码沙盒:
当我运行它时:
选择的选项是id而不是数据的值
当我单击“全选”时,所有值都将被选中,我清除它,它将被清除,但当我重新选择“全选”时,它将被选中多次,我无法清除它
我怎样才能修好它 这可以通过将handleChange功能更改为:
handleJourChange = jour => {
if (jour.includes("all")) {
this.setState(prevState => ({
jour: prevState.jours.map(item => item.id)
}));
} else {
this.setState({
jour
});
}
};
在您的代码沙盒中有一些涉及joursId的额外代码,我不确定。