antd Form表单 InputNumber 问题

  • 业务需求:产品类似图片这种,取input里面的值,用getFieldsValue()
    产品图
    下面为错误代码:为什么呢?getFieldsValue()取得是name属性得值,对于minutes
		<Form ref={this.timerFormRef}>           
                <Form.Item  label="延时执行" name="minutes" noStyle rules={[{ required: true }]}>
                  <InputNumber
                    min={1}
                    style={{ width: 160 }}
                    placeholder="请选择延时时间"
                    disabled={isDisabled}
                  ></InputNumber>
                &nbsp;&nbsp;分钟  //这里也被取到,所以拿到minutes是undefined
              </Form.Item>        
          </Form>

以下还是错误代码:样式上错误 nostyle 设置form.Item为纯字段样式
antd Form表单 InputNumber 问题_第1张图片

		<Form ref={this.timerFormRef}>
              <Form.Item label="延时执行" required>
                //
                <Form.Item name="minutes" rules={[{ required: true }]}>
                  <InputNumber
                    min={1}
                    style={{ width: 160 }}
                    placeholder="请选择延时时间"
                    disabled={isDisabled}
                  ></InputNumber>
                </Form.Item>
                &nbsp;&nbsp;分钟
              </Form.Item>
            </Row>
          </Form>

以下为正确代码:

		<Form ref={this.timerFormRef}>
            <Row gutter={16}> //row 一列
              <Form.Item label="延时执行" required>
                <Form.Item name="minutes" noStyle rules={[{ required: true }]}>
                  <InputNumber
                    min={1}
                    style={{ width: 160 }}
                    placeholder="请选择延时时间"
                    disabled={isDisabled}
                  ></InputNumber>
                </Form.Item>
                &nbsp;&nbsp;分钟
              </Form.Item>
            </Row>
          </Form>
  • 关于required
    要加在,有lable那层。才会有效果演示。对于提示消息,验证恒为true通过。对于数据的验证,需要手动添加。

你可能感兴趣的:(javascript,antd)