zoukankan      html  css  js  c++  java
  • react this.props.form异步执行问题

    最近在做一个选择器联动时,碰到this.props.form的异步执行问题,导致选择器一直没有办法联动

    如图,选择公司名称后,应该同步刷新门店选择默认值,

    但同时又要清空门店选择的上一次记录

    就用到了this.props.form中的setFieldsValue()方法来清空,但是this.props.form却是在最后才执行,导致选择的默认值 一直为空

    上代码:

    var paramsNew = {};
    let order =  React.createClass({
        mixins: [LoadingMixin,NotificationMixin,RequestMixin],
        getInitialState(){
            return {
                data: [],
                param:{},
               
            }
        },
        componentWillMount(){
            this.companyList()
        },
        componentWillUnmount(){
            
        },
        
        companyList(){
            this.get({ //公司列表
                url:"Api/lists/*******bac",
                param: {
                },
                noLoading: true
            }).then(result=> {
                this.setState({
                    tableCompanyName: result.result || [],
                },this.shopsList)
            });
        },
    
        shopsList(){
            this.get({ //门店列表
                url: "Api/lists/******af4bac",
                param: {
                    companyid:this.state.param.companyid ? this.state.param.companyid :'',
                },
                noLoading: true
            }).then(result=> {
    
                if(result.result == null){
                    paramsNew.shopid = ''
                    
                }else {
                    paramsNew.shopid = result.result[0].id
                    
                }
                this.setState({shopsList: result.result || [],param:paramsNew});
    
            });
        },
    
    
    
       
        companyChange(value){
            console.log("cpanyChange-?*--",value);
             this.props.form.setFieldsValue({
                 shopid:''  //此步一直异步执行,每次都是在最后才清空,导致请求的数据 的默认选择中值 一直为空
            })
            paramsNew.companyid = value;
            paramsNew.shopid = ""
            // console.log("paramsNew--------11-------",paramsNew);
            this.setState({
                param: paramsNew,
            },this.shopsList)
        },
        
        
        render() {
            const { getFieldDecorator } = this.props.form;
            return (
                <div className="order-main">
                    <div className="title">
                        <h2>订单管理</h2>
                    </div>
                    <div className="form-search">
                        <Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
                            <FormItem>
                                {
                                    getFieldDecorator('companyid',{
                                        initialValue: this.state.param && this.state.param.companyid || '',
                                    })(
                                        <Select style={{  '120px' }}
                                                onChange={this.companyChange}
                                                disabled={this.state.tableCompanyName.length == 1 ? true: false}
                                        >
                                            <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.param && this.state.param.shopid || '',
                                       
                                    })(
                                        <Select style={{  '120px' }} >
                                            {
                                                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 onClick={this.handleReset}>重置</Button>*/}
                        </Form>
                    </div>
                    <div>
                        
                    </div>
                </div>
            )
        }
    });
    order = createForm()(order);
    export default order;

    想了下,将表单字段 清空方法放进数据 请求中清空,才解决这个问题

    var paramsNew = {};
    let order =  React.createClass({
        mixins: [LoadingMixin,NotificationMixin,RequestMixin],
        getInitialState(){
            return {
                data: [],
                param:{},
               
            }
        },
        componentWillMount(){
            this.companyList()
        },
        componentWillUnmount(){
            
        },
        
        companyList(){
            this.get({ //公司列表
                url:"Api/lists/*******bac",
                param: {
                },
                noLoading: true
            }).then(result=> {
                this.setState({
                    tableCompanyName: result.result || [],
                },this.shopsList)
            });
        },
    
        shopsList(){
            this.get({ //门店列表
                url: "Api/lists/******af4bac",
                param: {
                    companyid:this.state.param.companyid ? this.state.param.companyid :'',
                },
                noLoading: true
            }).then(result=> {
    
                if(result.result == null){
                    paramsNew.shopid = ''
                    this.props.form.setFieldsValue({
                        shopid:''  //将清空方法放到此处清空,可以解决异步问题
                    })
                }else {
                    paramsNew.shopid = result.result[0].id
                    this.props.form.setFieldsValue({
                        shopid:result.result[0].id //将清空方法放到此处直接赋值,可以解决异步问题
                    })
                }
                this.setState({shopsList: result.result || [],param:paramsNew});
    
            });
        },
    
    
    
       
        companyChange(value){
            console.log("cpanyChange-?*--",value);
            // this.props.form.setFieldsValue({
                // shopid:''
            // })
            paramsNew.companyid = value;
            paramsNew.shopid = ""
            // console.log("paramsNew--------11-------",paramsNew);
            this.setState({
                param: paramsNew,
            },this.shopsList)
        },
        
        
        render() {
            const { getFieldDecorator } = this.props.form;
            return (
                <div className="order-main">
                    <div className="title">
                        <h2>订单管理</h2>
                    </div>
                    <div className="form-search">
                        <Form layout="inline" onSubmit={this.handleSubmit} autoComplete="off">
                            <FormItem>
                                {
                                    getFieldDecorator('companyid',{
                                        initialValue: this.state.param && this.state.param.companyid || '',
                                    })(
                                        <Select style={{  '120px' }}
                                                onChange={this.companyChange}
                                                disabled={this.state.tableCompanyName.length == 1 ? true: false}
                                        >
                                            <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.param && this.state.param.shopid || '',
                                    })(
                                        <Select style={{  '120px' }} >
                                            {
                                                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 onClick={this.handleReset}>重置</Button>*/}
                        </Form>
                    </div>
                    <div>
                        
                    </div>
                </div>
            )
        }
    });
    order = createForm()(order);
    export default order;
  • 相关阅读:
    2018-2019-2 20165209 《网络对抗技术》Exp3:免杀原理与实践
    2018-2019-2 20165209 《网络对抗技术》Exp2:后门原理与实践
    2018-2019-2 20165209 《网络对抗技术》Exp1:PC平台逆向破解
    2018-2019-2 20165209 《网络对抗技术》 Kali安装
    2018-2019-1 20165209 20165215 实验五 通讯协议设计
    2018-2019-1 20165209 《信息安全系统设计基础》第九周学习总结
    2018-2019-1 20165207 20165209 20165215 实验四 外设驱动程序设计
    2018-2019-1 信息安全系统设计实验三 并发编程 20165207 20165209 20165215
    2018-2019-1 20165207 20165209 20165215 实验二 固件程序设计
    2018-2019-1 20165207 20165209 20165215 实验一 开发环境的熟悉
  • 原文地址:https://www.cnblogs.com/zhixi/p/10650314.html
Copyright © 2011-2022 走看看