Antd 里面的select 选择框联动触发的问题

约定不等于承诺〃 2023-07-07 05:47 29阅读 0赞

有两个 select框，且这俩select框是关联的，触发select1，select2里面才会有值。

但是现在的问题是这样的：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70][]

触发select1，触发select2，再触发select1，此时select2里面的值变成了上次一选中的value 值，而不会被清空。

### 解决办法： ###

使用Select 里面的value属性，来进行清空

<Form style={
       {padding:'20px','boxSizing':'border-box'}}>
        <FormItem label="套卷名称" {...formItemLayout}>
          <Select defaultValue={packagedPapersId} onChange={selectPackage}>
            {
              packagedPaperList.map((item,idx)=>(
                <Option value={item.packagedPapersId} key={idx}>{item.packagedPapersName}</Option>
              ))
            }
          </Select>
        </FormItem>
        <FormItem label="试卷名称" {...formItemLayout}>
          <Select defaultValue={paperId} value={paperId} onChange={(val,item)=>selectPaper(val,item)}>
            {
              paperList.map((item,idx)=>(
                <Option value={item.paperId} key={idx}>{item.paperName}</Option>
              ))
            }
          </Select>
        </FormItem>
    </Form>

// select1里面的判断
    const selectPackage = (value) =>{
        if(paperId != '请选择名称'){
          setPaperId('请选择名称');
        }
        setPackagedPapersId(value)
        paperListFn(value)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200221115625149.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L01pc3NfbGlhbmdybQ==,size_16,color_FFFFFF,t_70