默認(rèn)天數(shù)是0

輸入數(shù)字

輸入錯(cuò)誤格式

輸入大于10000天數(shù)

正確輸入點(diǎn)擊保存，清空輸入框里面的值

對(duì)于上面的輸入框，整個(gè)頁面只有一個(gè)輸入框，所有沒有采用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'; /*定一個(gè)model層的namespace*/class TimeContent extends React.Component {constructor(props) {super(props);this.module = modelName;this.state = { day: 0,showError: false, /*輸入不是正確天數(shù)顯示*/showNumError: false, /*輸入天數(shù)大于10000展示*/typeName: this.props.type, /*附加的各個(gè)時(shí)間的類型*/title: this.props.title}}save = () =>{ //點(diǎn)擊保存按鈕let self = this;let { day } = this.state;if(self.checkNumber(day)){self.setState({showError:false});if( day > 10000 ){ /* 格式正確，但是數(shù)字大于了10000，繼續(xù)校驗(yàn)*/self.setState({showNumError:true,showError:false});}else{self.setState({showNumError:false});self.clearday(()=>{ /* 格式正確，數(shù)字合理，調(diào)用保存接口，并清空輸入框的值*/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("數(shù)據(jù)保存成功！");}checkNumber = (theObj) => { /* 校驗(yàn)數(shù)字 */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="輸入天數(shù)" 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">請(qǐng)輸入數(shù)字類型的天數(shù)！</div>}</div><div>{showNumError && <div className="red-content">天數(shù)不能大于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;} }

總結(jié)

以上是生活随笔為你收集整理的input组件未在Form内，清空输入数据的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。