如何对多个下拉字段进行唯一选择？

【问题标题】：how to have unique selection to multiple dropdown fields?如何对多个下拉字段进行唯一选择？
【发布时间】：2021-05-26 10:18:00
【问题描述】：

我有 2 个表单域（让它成为 A，B）。每个都有共同的下拉选项。如何从 B 的选项下拉列表中删除 A 中选择的选项。

<Form.Item
                  name="B"
                  label="B"
                 
                >
                  <Select>
                    

                    
                    <Option value="1">1</Option>
                    <Option value="2">2</Option>
                    <Option value="3">3</Option>
                    <Option value="4">4</Option>
                   

                  </Select>
                </Form.Item>
              `

【问题讨论】：

标签： reactjs forms antd

【解决方案1】：

您可以使用两个共享的变量。

假设您使用的是功能组件：

const [options, setOptions] = useState([
  {key: 1, value: 1, disabled: false},
  {key: 2, value: 2, disabled: false}
])

在渲染时：

<Select>
  {options.map((opt, index) => <Option onClick={() => handleClick(index)} key={opt.key} disabled={opt.disabled}> {opt.value} </Option>
</Select>

点击：

const handleClick = (index) => {
   const optionsCopy = [...options]
   optionsCopy[index].disabled = true
   setOptions(optionsCopy)
}

现在您可以在表单 A 和 B 之间共享下拉列表。

【讨论】：