ElemeFE / element-react

Element UI
https://elemefe.github.io/element-react/index
MIT License
2.83k stars 444 forks source link

FormItem嵌套在RadioGroup组件中时使用表单验证报错 #1054

Open Mirror36594912 opened 4 years ago

Mirror36594912 commented 4 years ago

问题描述: 由于需求的原因,要求在用户选中当前单选项后再填写此选项中的输入框,需要对单选框组以及输入框分别做表单验证,单选框组的验证没有问题,但是如下这种层级关系时在FormItem组件中加入prop属性做验证时页面报错

代码片段:

{/* 代码中的部分组件因与其他框架名称冲突故给组件起了带有El前缀的别名 */}
<ElForm.Item label={<Label>券有效期</Label>} prop="validType">
  <ElRadio.Group onChange={value => this.handleInputChange(value, 'validType')} value={validType} prop="validDays">
    <ElRadio value="1">
      <ElForm.Item labelWidth="0px" style={{display: 'inline-block'}}>
        自领取日起
        <Input {...inputProps.mini} onChange={value => this.handleInputChange(value, 'validDays')} value={validDays} />
        天有效
      </ElForm.Item>
    </ElRadio>

    <ElRadio value="2">
      <DateRangePicker
        placeholder="开始时间 至 结束时间"
        rangeSeparator=" 至 "
        onChange={value => this.handleInputChange(value, 'validTimeRange')}
        value={validTimeRange}
      />
    </ElRadio>
  </ElRadio.Group>
</ElForm.Item>

在Radio中嵌套的FormItem组件一旦加上prop属性,控制台就会弹出错误: FormItem.js:77 Uncaught TypeError: this.parent(...).addField is not a function FormItem.js:84 Uncaught TypeError: this.parent(...).removeField is not a function

疑问: 这是属于bug还是框架不支持或不赞同我这样的使用方法?