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

語言: CN / TW / HK

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

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

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

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

this.props.form.resetFields();

在程式碼裡的使用案例如下:

 1 //重置表單 
resetForm = () => { 2 this.props.form.resetFields(); 3 }; 4 5 6 return ( 7 <Modal 8 title="新增" 9 maskClosable={false} 10 confirmLoading={loading} 11 visible={visible} 12 onOk={this.submit} 13 onCancel={this.cancel} 14 afterClose={this.resetForm} 15 > 16 <Form onSubmit={this.submitHandle}> 17 ...... 18 </Form> 19 </Modal> 20 );

 

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

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

該表單部分前端React程式碼為:

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

若要只想置空或重置員工下拉框預設值話,可這樣設定:

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

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

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

 

 

本文同步分享在 部落格“朱季謙”(CNBlog)。
如有侵權,請聯絡 [email protected] 刪除。
本文參與“OSC源創計劃”,歡迎正在閱讀的你也加入,一起分享。