input组件未在Form内，清空输入数据

默认天数是0

输入数字

输入错误格式

输入大于10000天数

正确输入点击保存，清空输入框里面的值

对于上面的输入框，整个页面只有一个输入框，所有没有采用antd Form表单的形式，直接使用了 input的值来操作。

代码如下：

import React, { PropTypes } from 'react';
import { Link } from 'react-router';
import { Table, Row, Col, Input, Button, message } from 'antd';
import './timeContent.less';
const modelName = 'basicConfiguration';                 /*定一个model层的namespace*/

class TimeContent extends React.Component {

  constructor(props) {

    super(props);
    this.module = modelName;

    this.state = {    
      day: 0,
      showError: false,     /*输入不是正确天数显示*/
      showNumError: false,   /*输入天数大于10000展示*/
      typeName: this.props.type,  /*附加的各个时间的类型*/
      title: this.props.title
    }
  }

  save = () =>{     //点击保存按钮

    let self  = this;
    let { day } = this.state;
    if(self.checkNumber(day)){

      self.setState({
        showError:false
      });

      if( day > 10000 ){           /* 格式正确，但是数字大于了10000，继续校验*/
        self.setState({
          showNumError:true,
          showError:false
        });
      }else{
        self.setState({
          showNumError:false
        });
        self.clearday(()=>{       /* 格式正确，数字合理，调用保存接口，并清空输入框的值*/
          self.setState({
            day:""
          })
        })
      }
    }else{
      self.setState({
        showError:true,
        showNumError:false
      });
    }
  }

  clearday = (callback) => {
    let { day } = this.state;
    this.props.dispatch({
      type: `${this.module}/save`,
      payload:{
        effectiveDays:day,
        daysType:this.state.typeName
      }
    });
    callback();
    message.info("数据保存成功！");
 }

 checkNumber = (theObj) => {       /* 校验数字 */
    let reg = /[1-9]\d*.\d*/;
    if (reg.test(theObj)) {
      return true;
    }
    return false;
  }

  getDay = (e) =>{                 /* 获取输入框的值 */
    this.setState({
      day:e.target.value
    });
  }

  render = () => {

    let { showError, showNumError, title, day } = this.state;

    return (
      <div  className="time-content">
        <Row>
          <Col span={4}>{title}</Col>
        </Row>
        <Row className="input-content">
          <Col span={3}><Input placeholder="输入天数" onChange = {this.getDay}  value={day} /></Col>
          <Col span={1} className="input-day">天</Col>
          <Col span={3}><Button type="primary" onClick={this.save}>保存</Button></Col>
        </Row>
        <div>
          {
            showError && <div className="red-content">请输入数字类型的天数！</div>
          }
        </div>
        <div>
          {
            showNumError && <div className="red-content">天数不能大于10000！</div>
          }
        </div>
      </div>
    )
  }
}

export default TimeContent;

less代码：

.time-content{
    padding-top:20px;
    padding-left:20px;
    .input-content{
        padding-top:20px;
        padding-bottom:50px;
        height:50px;
        line-height:50px;
        .input-day{
            padding-left:20px;
        }
    }
    .red-content{
        color: red;
    }
}