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

Question

我试图使我正在创建的表单尽可能动态， 所以我有一个案例，如果用户从下拉列表中选择值，一些字段会隐藏而其他字段会出现，但是当下拉列表超过 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']);
      } 
    }
  }, []);

Answer 1

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

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

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

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

甚至更好：

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