ReactJS AvForm提交时动态渲染的表单字段无法获取值如何解决

问题原因 #

AvForm默认会基于初始化时传入的model对象确定需要收集的字段列表，且仅会收集初始化时已渲染、已注册到表单上下文的输入框值。你现在的动态字段初始化时不存在，也没有在初始model中声明，所以不会被纳入提交的values中。

修复方案 #

方案1：补全初始model的所有字段 #

在AvForm的初始model中提前声明所有可能出现的动态字段，设置默认值，让AvForm初始化时就识别到这些字段需要收集：

const initialModel = isNew 
  ? {
      applicationId: '',
      accessNumber: '', // 动态字段默认值
      // 其余所有可能出现的动态字段都在此处补全默认值
    } 
  : userClientAuthorityEntity;

// 替换原AvForm的model属性
<AvForm model={initialModel} onSubmit={saveEntity}>

方案2：改为隐藏动态字段而非销毁 #

如果你的业务逻辑允许，将条件渲染的销毁逻辑改为样式隐藏，保证AvInput始终存在于表单上下文中，值会被正常收集：

const RuoliChoosen = ruolo => {
  return (
    // 用display控制显隐，不销毁组件
    <div style={{ display: ruolo.ruolo ? 'block' : 'none' }}>
      <Row>
        <Col md="6">
          <AvGroup>
            <Label for="accessNumber">{'Access Number'}</Label>
            <AvInput
              id="accessNumber"
              data-cy="accessNumber"
              type="text"
              className="form-control"
              name="accessNumber"
            />
          </AvGroup>
        </Col>
        // 其余字段代码
      </Row>
    </div>
  )
}

如果需要隐藏字段时不提交对应值，可在切换前置选项的逻辑中手动将对应字段赋值为空即可。

方案3：强制刷新表单输入注册 #

当动态字段渲染条件变化时，手动触发AvForm重新扫描当前所有输入框，注册新增的字段：

import { useRef, useEffect } from 'react';

export const MyFunctionName = (props) => {
  const formRef = useRef(null);
  // 监听ruoli变化，强制更新表单输入注册
  useEffect(() => {
    formRef.current?.updateInputs();
  }, [ruoli]);

  // 其余原有代码...

  return (
    <AvForm ref={formRef} model={isNew ? {} : userClientAuthorityEntity} onSubmit={saveEntity}>
      {/* 其余原有表单代码 */}
    </AvForm>
  )
}

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