首页 > 其他 > 详细

react 使用Form组件如何清空上一次操作

时间:2019-03-21 11:34:05      阅读:129      评论:0      收藏:0      [点我收藏+]

最近在做一个表单联查时候,总是会发现后一个选择器会记住上一次选择的值 ,这会导致前一级选择器已经做出更新后,后一级选择器却还记住上一次的操作,

技术分享图片

 

这里有个方法可以在上级选择器事件操作时清空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>

 

react 使用Form组件如何清空上一次操作

原文:https://www.cnblogs.com/zhixi/p/10570118.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!