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

• Z时代
• 2024-01-10
• 分类：综合

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

这里有个方法可以在上级选择器事件操作时清空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组件如何清空上一次操作 的全部内容， 来源链接： utcz.com/z/382759.html