一个FormItem中校验多个input

实现以下效果： 

将三个input封装成一个组件InputComp.js：

import React, { Component } from 'react'
import { Input } from 'antd'

export default class InputComp extends Component {
  static getDerivedStateFromProps(nextProps) {
    if ('value' in nextProps) {
      return {
        ...(nextProps.value || {})
      }
    }
    return null
  }
  constructor(props) {
    super(props)
    const value = props.value || {}
    this.state = {
      number: value.number || '',
      hour: value.hour || '',
      minute: value.minute || ''
    }
  }
  numberChange = e => {
    const number = parseInt(e.target.value || 0)
    if (isNaN(number)) {
      return
    }
    if (!('value' in this.props)) {
      this.setState({ number })
    }
    this.triggerChange({ number })
  }
  hourChange = e => {
    const hour = parseInt(e.target.value || 0)
    if (isNaN(hour)) {
      return
    }
    if (!('value' in this.props)) {
      this.setState({ hour })
    }
    this.triggerChange({ hour })
  }
  minuteChange = e => {
    const minute = parseInt(e.target.value || 0)
    if (isNaN(minute)) {
      return
    }
    if (!('value' in this.props)) {
      this.setState({ minute })
    }
    this.triggerChange({ minute })
  }
  triggerChange = changedValue => {
    const { onChange } = this.props
    if (onChange) {
      onChange({
        ...this.state,
        ...changedValue
      })
    }
  }
  render() {
    const { number, hour, minute } = this.state
    const inputStyle = {
      display: 'inline-block',
      width: '100px',
      marginRight: '10px'
    }
    return (
      <span>
        <Input
          style={inputStyle}
          onChange={this.numberChange}
          value={number}
          suffix="天"
        />
        <Input
          style={inputStyle}
          onChange={this.hourChange}
          value={hour}
          suffix="时"
        />
        <Input
          style={inputStyle}
          onChange={this.minuteChange}
          value={minute}
          suffix="分"
        />
      </span>
    )
  }
}

在页面中的使用：

import React, { Component } from 'react'
import {Form, Input} from 'antd'
import InputComp from './InputComp'
const FormItem = Form.Item

class Test extends Component {
  state = {
    number: 0,
    hour: 0,
    minute: 0
  }
  checkTime = (rule, value, callbacks) => {
    if (
      (!value.number && !value.hour && !value.minute) ||
      (value.number === '0' && value.hour === '0' && value.minute === '0')
    ) {
      callbacks('时间必填且不能为0')
      return
    }
    if (value.hour > 24) {
      callbacks('小时范围应在1-24之间')
      return
    }
    if (value.minute > 60) {
      callbacks('分钟范围应在1-60之间')
      return
    }
    callbacks()
  }
  render() {
    const {getFieldDecorator} = this.props.form
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 }
      }
    }
    return (
      <Form>
        <FormItem label="时间" {...formItemLayout}>
        {getFieldDecorator('timeInput', {
           rules: [{ validator: this.checkTime }],
           initialValue: {
              number: this.state.number,
              hour: this.state.hour,
              minute: this.state.minute
           }
         })(<InputComp />)}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(Test)

拿到input中的值：

this.props.form.validateFields((err, values) => {
    if(!err){
        let number = values['timeInput'].number
        let hour = values['timeInput'].hour
        let minute = values['timeInput'].minute
        // 注意这里的'timeInput'要和'getFieldDecorator'中绑定的id一致
    }
}