我们可以隐藏表单字段依赖于其他字段吗？

Posted 2023-02-18

【中文标题】我们可以隐藏表单字段依赖于其他字段吗？

【英文标题】：can we hide form fields depend on other fields?

【发布时间】：2022-01-18 14:01:39

【问题描述】：

我试图使我正在创建的表单尽可能动态， 所以我有一个案例，如果用户从下拉列表中选择值，一些字段会隐藏而其他字段会出现，但是当下拉列表超过 2 个时，我还有其他情况，让我给你们举个例子：

下拉 A :['a','b','c'], 下拉 B:['d','e','f'],

第一种情况，如果用户从 A.a 中选择，则字段 name 将出现，而字段 email 将隐藏。

第二种情况，如果我们有第一种情况，用户如果从 B.e 中选择会出现一些文件，而另一些会隐藏。

所以我该怎么做，这是我的代码。但它不能正常工作：

const [fieldsToHide, setFieldsToHide] = useState<string[]>([
    'name',
    'email',
    'password',
    'signIn',
    'signUp'
  ]);

const onFieldsChange = useCallback((changedFields: FieldData[], allFields: FieldData[]) => 
    const [changedField] = changedFields;
    const  name, value  = changedField || ( as FieldData);
    if (Array.isArray(name) && name.length) 
      const [fieldName] = name;
      if (fieldName === 'A' && value === 'a') 
        setFieldsToHide(['name', 'email']);
       else if (fieldName === 'A' && value === 'c') 
        setFieldsToHide(['email']);
       else if (fieldName === 'A' && value === 'b') 
        setFieldsToHide(['name']);
       else if (fieldName === 'B' && value === 'd') 
        setFieldsToHide(...fieldsToHide,'password']);
       else if (fieldName === 'B' && value === 'e') 
        setFieldsToHide(...fieldsToHide,'signIn','signUp']);
       
    
  , []);

【参考方案1】：

您没有说明为什么它不起作用。你到底哪里有问题。我可以看到的一个问题是：

setFieldsToHide(...fieldsToHide,['password'])

你在这里执行一个带有多个参数的函数 - 而你想用一个参数执行它 - 一个表：

setFieldsToHide([...fieldsToHide,'password']);

甚至更好：

setFieldsToHide(prevFieldsToHide => [...prevFieldsToHide,'password']);

【讨论】：

我的问题当我从第二个 dropDown B 中选择时它隐藏所有字段，当我从 dropDown A 中选择时它显示第二个 dropDown 的所有字段