选择选项后语义 UI 下拉菜单未设置值

Question

我正在使用 React 语义 ui。我正在 Fieldset 中呈现下拉菜单。我已经编写了这样的代码，一旦一个选项被 selected，选项就会更新，以便从列表中删除 selected 选项。 但是当我 select 从下拉列表中选择一个选项时，selected 值没有显示，而是显示为空。

这是我的代码：这是我的下拉代码：

<Dropdown
name={`rows.${index}.mainField`}
className={"dropdown fieldDropdown"}
widths={2}
placeholder="Field"
fluid
selection  
options={mainFieldOptions}
value={row.mainField}
onChange={(e, { value }) => {
     setFieldValue(`rows.${index}.mainField`, value)
     updateDropDownOptions(value)                               
     }
  }                                                            
/>

我的选择：

let mainField = [
    { key: "org", text: "org", value: "org" },
    { key: "role", text: "role", value: "role" },
    { key: "emailId", text: "emailId", value: "emailId" },
]

此外，我还有：

const [mainFieldOptions, setMainFieldOptions] = useState(mainField)

并且，

  const updateDropDownOptions = (value:any) => {
        let updatedOptions: { key: string; text: string; value: string }[] = []
        mainFieldOptions.forEach(option => {
            if(option.key != value){
                updatedOptions.push({ key:option.key , text:option.key, value:option.key  })
            }
        })
        setMainFieldOptions(updatedOptions)
        console.log("mainfield", mainField)
    }

在 onChange 中，如果我不调用 updateDropDownOptions() 方法，则会设置下拉值。但是当我调用该方法时，它给出了空白值。请帮忙。

Answer 1

您的代码几乎不需要更改，

当您添加一行 [{}] 时，您正在推送整个 initialValues，但您只需要推送 {}，因此在推送方法中将代码更改为 initialValues[0]。
不需要为选项维护额外的状态。您可以根据 values.rows 中可用的其他行中的所选选项过滤选项。

用于过滤选项的实用程序

const getMainFieldOptions = (rows, index) => {
  const selectedOptions = rows.filter((row, rowIndex) => rowIndex !== index);

  const filteredOptions = mainField.filter(mainFieldOption => !selectedOptions.find(selectedOption => mainFieldOption.value === selectedOption.mainField));
  return filteredOptions;
}

渲染每一行时调用此实用程序

values.rows.length > 0 &&
                values.rows.map((row, index) => {
                  const  mainFieldOptions = getMainFieldOptions(values.rows, index);

Working Sandbox

选择选项后语义 UI 下拉菜单未设置值

Semantic UI dropdown not setting value after selecting option

reactjs

semantic-ui

formik