前端筆記：React的form表單全部置空或者某個操作框置空的做法

在React框架前端開發中，經常會有彈出框的開發，涉及到彈出框，難免就會有表單。一般在關閉彈出框或者對表單聯動時，往往都需要考慮對表單進行置空操作了。

我以前在工作就遇到過這類問題，正好順便對表單置空這塊做一些總結小記錄。

主要有兩種情況，一種是對整個表單置空，一種是想靈活對其中個別選框置空。

1.全部置空的做法,一般在彈出框關閉同時，重置該form所有表單，使用方法如下：

this.props.form.resetFields();

在代碼里的使用案例如下：

//重置表單 
   resetForm = () => {  2         this.props.form.resetFields();  3  };  4 

return (  7             <Modal  8                 title="添加"
                maskClosable={false} 10                 confirmLoading={loading} 11                 visible={visible} 12                 onOk={this.submit} 13                 onCancel={this.cancel} 14                 afterClose={this.resetForm} 15             >
                <Form onSubmit={this.submitHandle}>
 ...... 18                 </Form>
            </Modal>
        );

 

2.針對某個操作框置空的做法

例如，form表單里有一個部門和一個張三的聯動下拉框，每次選擇部門時，都需要重置員工對應的下拉框：

該表單部分前端React代碼為：

<FormItem   label="部門" {...ItemLayout}>
    {getFieldDecorator('dept', {  3 ​  4  })(  5         <Select   optionFilterProp="dept" placeholder="請選擇部門">
 {  7                 dept.map((item) => (  8                     <Option key={item.d}>{item.deptname}</Option>
 )) 10  } 11         </Select>
 )} 13 </FormItem>,
​ 15 <FormItem   label="員工" {...ItemLayout}>
    {getFieldDecorator('people', { 17 ​ 18  })( 19         <Select   optionFilterProp="people" placeholder="請選擇員工">
 { 21                 people.map((item) => ( 22                     <Option key={item.id}>{item.peopleName}</Option>
 )) 24  } 25             
        </Select>
 )} 28 </FormItem>

若要只想置空或重置員工下拉框默認值話，可這樣設置：

this.props.form.setFieldsValue({ people: null, });

form還有不少便捷的方法，如getFieldValue(fieldName: string)則可以獲取到各FormItem的選項值，如以下則可獲取到員工選框的值：

this.props.form.getFieldValue(“people”)