编辑时选中 CheckboxGroupInput 组件中的复选框

Question

我有一个表单显示两个实体品牌和分销之间的多对多关系。我通过品牌页面中的 CheckboxGroupInput 组件显示分布。在表单编辑（编辑组件）期间，我设法预先检查了之前在创建（创建）期间检查过的分布（这在 documentation 中未指定）但我无法检查或取消选中任何分布.

版本格式如下：

export class BrandEdit extends Component {

    constructor(props) {
            super(props)
            this.state = {
                isLoading: true
            }
    }

    componentDidMount() {

        //Find all distributions
        restClient(GET_MANY, 'distribution', {
            sort: {field: 'name', order: 'ASC'}
        })
            .then(response => {
                return restClient(GET_ONE, 'brand', {
                    id: this.props.match.params.id
                }).then(brandResult => {
                    let distributionsIds = []
                    brandResult.data.distributions.forEach(distribution => {
                        distributionsIds.push(distribution.id)
                    })
                    this.setState({
                        distributions: response.data,
                        distribution_checked_ids: distributionsIds,
                        isLoading: false,
                    })
                });
            })
    }

    render() {
        const { isLoading, distributions, distribution_checked } = this.state
        return (
            <div>
                {
                <Edit {...this.props}>
                    <SimpleForm>
                        <DisabledInput source="id"/>
                        <TextInput label="Nom" source="name"/>
                        <CheckboxGroupInput
                            source="distributions"
                            input={{
                                value: this.state.distribution_checked_ids,
                                onChange: (checkedDistributionIds) => {
                                    this.setState({ distribution_checked_ids: checkedDistributionIds });
                                }
                            }}
                            choices={distributions}
                            optionValue="id"
                            optionText="name"
                        />
                    </SimpleForm>
                </Edit>
                }
            </div>
        );
    }
}

有什么想法吗？

谢谢

Answer 1

请删除 input 道具。你为什么要自己处理表单状态？ AOR 使用 redux-form 来处理。

Answer 2

我们需要将 Distribution id 数组而不是 Distribution 对象数组传递给组件。

这是组件：

<CheckboxGroupInput
    source="distributions"
    choices={distributions}
    optionValue="id"
    optionText="name"
/>

数据应如下所示：

{
 "id": 2115,
 "name": "Test",
 "distributions": [12, 13, 14]
}

编辑时选中 CheckboxGroupInput 组件中的复选框

Check checkboxes in CheckboxGroupInput component while editing

admin-on-rest