zoukankan      html  css  js  c++  java
  • 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={{  '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={{  '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>
  • 相关阅读:
    【Mybatis】【10】foreach 批量操作
    【Java】【30】数据基本类型的转换
    【Mybatis】【9】ResultMap支持继承
    【记录】【4】各种工具
    【cmd】【4】ping IP或者域名,看是否能连通
    【cmd】【3】查看jdk安装路径
    【JS】【29】解决浏览器自动填充密码输入框的问题
    QQ登入(2)获取用户信息
    QQ登入(1)-有客户端直接授权,没客户端web授权
    百度定位
  • 原文地址:https://www.cnblogs.com/zhixi/p/10570118.html
Copyright © 2011-2022 走看看