表單應用特別是在後臺管理中常用到，本文就來闡述一下如何獲取和更新form的內容。
注意： 一個submit按鈕可以獲取到所有的form表單資料。
如果頁面中有多個form時，只想拿到其中幾個input的值，那麼此時可以用以下方法來獲取
this.porps.form.getFieldValue(‘input的name名’);
例如：this.props.form.getFieldValue(‘input’);
程式碼直接擼：

class FinshedProListList extends Component {
	constructor () {
        super();
	}
	/**
     * 搜尋
     * @params 
     *      size         {[Number]}      每頁顯示條數
     *      current      {[Number]}      當前頁
     *      name         {[String]}      成品名稱 
     *      autherName   {[String]}      作者名字
     *      startTime    {[String]}    
     *      endTime         
     *      ...
     * @return [{Object}]
     *      id           
     *      makingTiem   製作時間
     *      ...
     */ 
    handleSubmit = () => {
		 function timeChange (dateStr) {
            let endDate,
                date = new Date(dateStr);
            endDate = date.getFullYear() + '-' 
                    + (date.getMonth() + 1) + '-' 
                    + date.getDate() + ' ' 
                    + date.getHours() + ':' 
                    + date.getMinutes() + ':'
                    + date.getSeconds(); 
            return endDate;
        }
        /**
        * 二、this.props.form.validateFields獲取表單的values和error
		*/
        this.props.form.validateFields((err, values) => {
            if (!err) {
                let name,
                    autherName,
                    startTime,
                    endTime;
                values.name ? name = `name=${values.name}&` 
			                : name = '';
                values.autherName ? autherName = `autherName=${values.autherName}&` 
				                  : autherName = '';
                values.startTime ? startTime = `startTime=${timeChange(values.startTime)}&` 
				                 : startTime = '';
                values.endTime ? endTime = `endTime=${timeChange(values.endTime)}&`
				               : endTime = '';
                fetch("/platform/admin/finishedWorks/query?"+name+autherName+startTime+endTime,
                        {credentials: 'include'}//有登入許可權時使用
                    )
                    .then(res=>res.json())
                    .then(data=>{
                        if (data.code === '200') {
                            // console.log(data.data.records)
                            data.data.records.forEach((v,i)=>{
                                v.key=i;
                            });
                            this.setState({
                                data: data.data.records,
                                pageInfo:{
                                    current:data.data.current,
                                    pages:data.data.pages,
                                    total:data.data.total
                                },
                                searchInfo:{
                                    name: name,
                                    autherName: autherName,
                                    startTime: startTime,
                                    endTime: endTime
                                }
                            })
                           
                        }
                    }).then(()=>{
	                    /*
	                    * 三、this.props.form.setFieldsValue({})改變Form值
	                    */
						this.props.form.setFieldsValue({
			            	name: this.state.dataDetail.name,
		                    autherName: this.state.dataDetail.autherName,
		                    startTime: this.state.dataDetail.startTime,
		                    endTime: this.state.dataDetail.endTime,
		                });
					})
            }
        })
	}
    render () {
	    /*
	     此處必須定義getFieldDecorator，可以用來包裝控制元件。只有此處定義了才可以用this.props.form.setFieldsValue({})來更新(設定)form內的資料。
	    */
    	const {getFieldDecorator} = this.props.form;
    	let style = {
            labelCol:{span:8},
            wrapperCol:{span:16}
        };
    	return （
			<Home selected='finished_pro_list'>
				<Form className="demand-list SongsExampleList" onSubmit={(e)=>{e.preventDefault(),this.handleSubmit()}}>
					<div className="demand-list-top" style={{height:140}}>
						<Row style={{height:"55px"}}>
							<Col span={6}>
								<FormItem label="成品名稱" {...style}>
									/* 一、在From元件中使用，
										'name'為該Form表單下的資料key，
										 rules為校驗該key的規則
									*/
									{
										getFieldDecorator('name',{
											rules:[{required: false,message:'請填寫任務單號'}]
										})(
											<Input autoComplete="off" />
										)
									}
								</FormItem>
							</Col>
						</Row>
					</div>
				</Form>
			</Home>
		）
    }
}
/*
* 零： Form.create()自行處理表單資料。可以通過this.props.from來處理表單資料。
*
*/
const FinshedProFrom = Form.create()(FinshedProListList);
 

有疑問可以掃碼提問哦：