React Semantic UI中如何编程式清空Dropdown并实现下拉框联动

一、直接实现联动清空 #

你误解了Semantic UI Dropdown的受控用法：clearable仅控制是否显示清空按钮，你完全可以通过绑定value属性到状态变量，直接修改状态清空选中值，操作步骤如下：

1. 给第二个Dropdown组件添加value={secondVal}属性，将其转为完全受控组件，选中值完全由你的secondVal状态控制
2. 在第一个下拉框的onChange逻辑中，当触发禁用条件（第一个选中Yes/清空）时，直接调用setSecondVal('')即可自动清空第二个下拉框的选中值
3. 你现有代码的onChange还存在语法结构错误，同步修正即可。

二、关于你提到的替代方案（隐藏选项C） #

可以实现，两种常用实现方式：

• 方式1：动态修改第二个下拉框的options：当第二个下拉框禁用时，将options替换为仅包含C的配置；可用时恢复为A/B的配置，用户在可选状态下完全看不到C选项
• 方式2：不需要修改options，仅在触发禁用时直接将secondVal设为C，提交时按业务逻辑处理这个值即可，用户下拉选项里还是只有A/B，不会看到C选项

修正后完整可运行代码 #

import React, { useState } from 'react';
import { Dropdown, Form} from "semantic-ui-react"

const firstDropdownOptions= [
  {
    key: 'Yes',
    text: 'Yes',
    value: 'Yes',
  },
  {
    key: 'No',
    text: 'No',
    value: 'No',
  },
]
const secondDropdownOptions= [
  {
    key: 'A',
    text: 'A',
    value: 'A',
  },
  {
    key: 'B',
    text: 'B',
    value: 'B',
  },
]
// 隐藏选项C的配置，需要的时候启用
const hiddenOptionC = [{key: 'C', text: 'C', value: 'C'}]

export const InputForm = () => {
  const [firstVal, setFirstVal] = useState('')
  const [secondVal, setSecondVal] = useState('')

  // 不需要单独存condition状态，直接通过firstVal计算更不容易出错
  const isSecondDisabled = firstVal === 'Yes' || firstVal === ''

  return (
    <Form>
        <Dropdown
          placeholder='First Value'
          selection
          clearable
          options={firstDropdownOptions}
          value={firstVal}
          onChange={(_, data) => {
            setFirstVal(data.value)
            // 满足禁用条件时清空第二个下拉框
            if(data.value === 'Yes' || data.value === ''){
              setSecondVal('')
              // 如果要用替代方案，这里改成setSecondVal('C')即可
            }
          }}
        />
        <Dropdown
          placeholder='Second Value'
          selection
          clearable
          disabled={isSecondDisabled}
          // 如果要用替代方案动态改options，这里改成options={isSecondDisabled ? hiddenOptionC : secondDropdownOptions}
          options={secondDropdownOptions}
          value={secondVal}
          onChange={(_, data) => setSecondVal(data.value)}
        />
    </Form>
  )
}

内容的提问来源于stack exchange，提问作者WhoDatBoy