javascript - 无法使用蚂蚁设计更改多选的值并做出反应
问题描述
我有一个用ant Design开发的多选,他的值是从后端获取的:
"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>
我的代码沙盒: https ://codesandbox.io/s/async-meadow-2clz5
当我运行它时:
select 的选项是 id 而不是数据的值。
当我点击全选时,所有的值都会被选中,我清除它,它会被清除,但是当我重新全选时,它会被选中多次,我无法清除它。
我该如何解决?
解决方案
这可以通过将handleChange
功能更改为:
handleJourChange = jour => {
if (jour.includes("all")) {
this.setState(prevState => ({
jour: prevState.jours.map(item => item.id)
}));
} else {
this.setState({
jour
});
}
};
joursId
我不确定您的代码盒中涉及一些额外的代码。
完整代码沙盒
推荐阅读
- reactjs - react-router上的刷新页面输出空白页面,未加载bundle.js
- matlab - 如何在 MATLAB 中控制协方差时计算回归?
- sql - 分组后在 Laravel 中获取计数而不使用 get()
- python - 如何通过每个位置的可能性列表获取每个字符串变化
- mysql - 在 Symfony4 更新功能不起作用,从数据库中获取值之后
- ruby-on-rails - Rails Mongodb 无法保存记录
- javascript - 拖放功能在带有nodejs(javascript)测试自动化框架的selenium webdriver中不起作用
- python - 命令行中的 python filename.py 不起作用
- api - 如何从 LinkedIn AIP 获取 access_token?
- azure-databricks - 使用 RasterIO 读取 GTiff 文件时出现 Databricks 错误