react 使用Form组件如何清空上一次操作
最近在做一个表单联查时候,总是会发现后一个选择器会记住上一次选择的值 ,这会导致前一级选择器已经做出更新后,后一级选择器却还记住上一次的操作,
这里有个方法可以在上级选择器事件操作时清空Form组件的记录
this.props.form.resetFields();
整个表单事件
companyChange(value){ console.log("companyChange--",value); this.props.form.resetFields(); //<------就是加在这里 let shopsListShopId = {} shopsListShopId.companyid = value; this.setState({ shopsListShopId: shopsListShopId, },this.shopsList) }, <Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off"> <FormItem> { getFieldDecorator('product_name')( <Input placeholder="请商品输入名称" /> ) } </FormItem> <FormItem> { getFieldDecorator('companyid',{ initialValue: this.state.param && this.state.param.companyid || '', })( <Select style={{ width: '120px' }} onChange={this.companyChange} > <Option value=""> --公司名称-- </Option> { this.state.tableCompanyName && this.state.tableCompanyName.map((item,index) => { return ( <Option key={item.id} value={item.id}> {item.title}</Option> ) }) } </Select> ) } </FormItem> <FormItem> { getFieldDecorator('shopid',{ initialValue: this.state.shopid && this.state.shopid ||'', })( <Select style={{ width: '120px' }} > <Option value=""> --门店名称-- </Option> { this.state.shopsList && this.state.shopsList.map((item,index) => { return ( <Option key={item.id} value={item.id}> {item.title}</Option> ) }) } </Select> ) } </FormItem> <Button type="primary" htmlType="submit">查询</Button> <Button type="primary" onClick={this.addOrUpdate.bind(this,'')}>添加</Button> {/*<Button onClick={this.handleReset}>重置</Button>*/} </Form>