[ant design] form-中的-列表可选项,如果是异步加载的,可选项组件,不要放在-spining-组件之类,否则会导致编辑的时候,没有自动映射

44 阅读1分钟

image

表单创建时候的写法

因为不是编辑模式,不用根据服务器端数据,进行已经选项 -- 可选列表 的映射关系,所以创建的时候,没有问题。 但编辑的时候,因为 getFieldDecorator 里面直接包装的如果是 Spin 元素的话,就凉了

<Form.Item label="选择学校" {...formItemLayout} extra={
    // TODO
    this.props.querySchoolList_loading &&
    <Icon type="loading" style={{ fontSize: 24 }} />
}>
    {getFieldDecorator(`selected_school_id`, {
    })(
            ? <Spin spinning={this.props.querySchoolList_loading} indicator={<Icon type="loading" style={{ fontSize: 16 }} spin />}>
                {
                    this.props.querySchoolList_loading &&
                    <Radio.Group onChange={this.handleSelectSchool}>
                    {
                        schoolList.map(option => <Radio value={option.id} key={option.id}>{option.name}</Radio>)
                    }
                </Radio.Group>
                }
            </Spin>
    )}
</Form.Item>

正确写法

<Form.Item label="选择学校" {...formItemLayout} extra={
    // TODO
    this.props.querySchoolList_loading &&
    <Icon type="loading" style={{ fontSize: 24 }} />
}>
    {getFieldDecorator(`selected_school_id`, {
    })(
            this.props.querySchoolList_loading
            ? <Spin spinning={this.props.querySchoolList_loading} indicator={<Icon type="loading" style={{ fontSize: 16 }} spin />}>
            </Spin>
            : <Radio.Group onChange={this.handleSelectSchool}>
                {
                    schoolList.map(option => <Radio value={option.id} key={option.id}>{option.name}</Radio>)
                }
            </Radio.Group>
    )}
</Form.Item>