ReactJS使用AvForm提交表单无法获取radio单选按钮deletedDate的值如何解决

问题原因 #

• 你使用的AvForm仅会自动收集其内部AvField组件绑定的字段值，你当前的单选按钮组用的是普通Input组件，没有使用AvField，因此deletedDate字段不会被自动纳入filterResults的values参数中。
• 额外规范问题：所有单选按钮的id属性均为deletedDate，属于重复ID，不符合HTML规范，建议为不同单选按钮分配唯一ID。

解决方案 #

有两种可选方案：

方案1：将单选按钮改为AvField组件（推荐） #

将普通Input替换为AvField，指定type="radio"，让AvForm自动收集该字段值，修改后的单选代码如下：

<FormGroup check>
  <Label id="deletedDate-all" check>
    <AvField
      id="deletedDate-all"
      data-cy="deletedDate"
      type="radio"
      name="deletedDate"
      value="all"
      checked={formModel.deletedDate === 'all'}
      onChange={handleChange}
    />{' '}
    All
  </Label>
  <br/>
  <Label id="deletedDate-true" check>
    <AvField
      id="deletedDate-true"
      data-cy="deletedDate"
      type="radio"
      name="deletedDate"
      value="true"
      checked={formModel.deletedDate === 'true'}
      onChange={handleChange}
    />{' '}
    Yes
  </Label>
</FormGroup>
<FormGroup check>
  <Label id="deletedDate-false" check>
    <AvField
      id="deletedDate-false"
      data-cy="deletedDate"
      type="radio"
      name="deletedDate"
      value="false"
      checked={formModel.deletedDate === 'false'}
      onChange={handleChange}
    />{' '}
    No
  </Label>
</FormGroup>

修改后提交表单时，values.deletedDate就可以正常读取到对应的值。

方案2：直接从本地状态formModel取值 #

你已经通过handleChange把所有表单字段的值同步到了本地状态formModel中，提交时可以直接从该状态获取值，无需依赖AvForm返回的values参数：

const filterResults = (event, errors, values) => {
  console.log('values ', values, 'event ', event, ' errors ', errors);
  let entity = null;
  if (errors.length === 0) {
    entity = {
      ...values,
      // 直接从本地状态取deletedDate
      deletedDate: formModel.deletedDate
    };
  }
  console.log('entity is ', entity);
  // 后续逻辑
}

额外优化提示 #

你在handleChange中调用setFormModel后立即打印formModel.deletedDate得到的是旧值，因为React的状态更新是异步操作，如需打印最新值可以在setFormModel的回调或者 useEffect 中监听formModel变化打印。

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