无法使用 ant design 更改多选的值并做出反应

Question

我有一个用 ant Design 开发的 multiselect，他的值是从后端获取的：

 "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而不是数据的值。
当我点击 select all 时，所有值都会被 selected 并且我清除它，它会被清除，但是当我重新 select all，会被select多次编辑，我无法清除它。

我该如何解决？

Answer 1

这可以通过将 handleChange 功能更改为：

来实现

handleJourChange = jour => {
  if (jour.includes("all")) {
    this.setState(prevState => ({
      jour: prevState.jours.map(item => item.id)
    }));
  } else {
    this.setState({
      jour
    });
  }
};

在你的 codesandbox 中有一些额外的代码涉及 joursId，我不确定。
Full CodeSandbox

无法使用 ant design 更改多选的值并做出反应

Can't change the values of multiselect with ant design and react

javascript

reactjs

select

multi-select

antd