react setState机制

最新推荐文章于 2025-04-30 15:20:34 发布

an74520

最新推荐文章于 2025-04-30 15:20:34 发布

阅读量200

点赞数

分类专栏： React 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/an74520/article/details/124897611

版权

React 专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了在React中如何使用setState方法处理异步更新，并展示了在Modal组件中进行表单数据管理的实践。作者通过示例代码展示了在表单中使用Select和Checkbox.Group组件，并结合Form.Item和getFieldDecorator进行数据初始化和验证。同时，文章还涵盖了在状态更新后的回调中如何进一步操作，例如切换Modal的可见性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. setState方法处理参数是异步，下面set成功之后得写法

this.setState({
            id:e.id,
            period:e.period,
            grade:e.grade,
            subject:e.subjectList
        }, ()=> {
            console.log("编辑------",this.state)
            debugger;
            this.setState({visible: true});
        });

2.下面是页面写法

{this.state.visible?<Modal
                    title="年级"
                    visible={this.state.visible}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                >
                    <Form {...formItemLayout} >
                        <Form.Item label='所属学段'>
                            {getFieldDecorator('period', {
                                initialValue: this.state.period,
                                rules: [{ required: true, message: '所属学段不能为空！' }],
                            })(
                                <Select onChange={this.handleChange} value={this.state.period}>
                                    {
                                        this.state.periodList.map(e => {
                                            return (
                                                <Option  key={e.period} value={e.period}>{e.period}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label='年级'>
                            {getFieldDecorator('grade', {
                                initialValue: this.state.grade,
                                rules: [{ required: true, message: '年级不能为空！' }],
                            })(
                                <Select onChange={this.handleChangeGrade} value={this.state.grade}>
                                    {
                                        this.state.gradeList.map(e => {
                                            return (
                                                <Option key={e.grade} value={e.grade}>{e.grade}</Option>
                                            )
                                        })
                                    }
                                </Select>
                            )}
                        </Form.Item>
                        <Form.Item label='学科'>
                            {getFieldDecorator('subject', {
                                initialValue: this.state.subject,
                                rules: [{ required: true, message: '学科不能为空！' }],
                            })(
                                <Checkbox.Group style={{ width: '100%' }} onChange={this.onCheckbox}>
                                    <Row>
                                        {
                                            this.state.subjectList.map(e => {
                                                return (
                                                    <Col style={{marginTop:'10px'}} span={8}  key={e.name}>
                                                        <Checkbox value={e.name}>{e.name}</Checkbox>
                                                    </Col>
                                                )
                                            })
                                        }
                                    </Row>
                                </Checkbox.Group>
                            )}
                        </Form.Item>
                    </Form>
                </Modal>:null}