时间戳

首页 > 解决方案 > 如何在 React Semantic UI 中以编程方式清除下拉菜单

semantic-ui-react - 如何在 React Semantic UI 中以编程方式清除下拉菜单

问题描述

我在 React 中使用语义 UI，我有两个下拉表单。第一个下拉列表有选项Yes和No，第二个下拉列表有选项A和B。如果第一个表单选择了“是”选项（或者如果它被清除），那么我希望第二个下拉列表被清除和禁用。

目前，我有这样的第二个下拉列表被禁用，但我无法弄清楚如何清除选定的选项（如果有的话）。我不能以禁用下拉列表（通过保存状态变量）的方式执行此操作，因为 Dropdown 具有属性 clearable ，而不是 clear ed。

或者，我可以将第二个下拉菜单设置为仅在禁用时设置的其他第三个选项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',
  },
]

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

  const [condition, setCondition] = useState(false)

   return (
    <Form>
        <Dropdown
          placeholder='First Value'
          selection
          clearable
          options={firstDropdownOptions}
          onChange={(_, data) => {setFirstVal(data.value)};
            if(data.value=="No"){setCondition(true)}
            else{setCondition(false)};
            }
        />
        <Dropdown
          placeholder='Second Value'
          selection
          clearable
          disabled={condition}
          options={secondDropdownOptions}
          onChange={(_, data) => setSecondVal(data.value)}
        />
    </Form>
)}

标签： semantic-ui-react

解决方案

Dropdown应该有value道具。但是在第二个中清除现有值时Dropdown，请确保遵循以下说明：https ://github.com/Semantic-Org/Semantic-UI-React/issues/3625#issuecomment-654199235

推荐阅读