2

以下写法报错:一个form.item内不能有两个getDecorators

 <Form.Item label='准确度'>
  {getFieldDecorator('accuracyMin', {})(
    <Input
      placeholder='最小范围值'
    />
  )}
  ~
  {getFieldDecorator('accuracyMax', {})(
    <Input
      placeholder='最大范围值'
    />
  )}
</Form.Item>

解决方案:
1.自定义校验:https://www.cnblogs.com/chaox...
antd提供了validateStatus,help,hasFeedback 等属性,你可以不需要使用 Form.create 和 getFieldDecorator,自己定义校验的时机和内容。
validateStatus: 校验状态,可选 'success', 'warning', 'error', 'validating'。
hasFeedback:用于给输入框添加反馈图标。
help:设置校验文案。

2.form.item包一层,嵌套
antd官网:一个表单项内有多个控件,你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局

<Form {...formItemLayout}>
    <Form.Item label='准确度'>
      <Form.Item  style={{ display: 'inline-block', width: 'calc(50% - 5px)', marginRight: 8 }}>
        {getFieldDecorator('accuracyMin', {
          rules: [{required: true, message: 'Please input your username!'}],
        })(
          <Input
            placeholder='最小范围值'
          />
        )}
      </Form.Item>
      <Form.Item  style={{ display: 'inline-block', width: 'calc(50% - 5px)'}}>
        {getFieldDecorator('accuracyMax', {})(
          <Input
            placeholder='最大范围值'
          />
        )}
      </Form.Item>
    </Form.Item>

image.png


云端的日子
66 声望1 粉丝

引用和评论

0 条评论