reactjs - Checkbox.Group of ant design React 无法设置默认值

Question

我正在开发一个基于蚂蚁设计的反应功能应用程序。在使用 Checkbox.Group 时，我发现我无法在动态生成的选择框列表上设置默认值。我的标准是，当打开自定义模式时，根据传递的 loginId（一个整数值），默认情况下应该选中该复选框。如果我取消选择，那很好。但是在第一次打开模态时，应该设置默认值。我真的尝试了很长时间，不知道我到底错过了什么。如果你能帮忙，那就太好了。

这是我的代码，

export const ContactModal = props => {
const loggedInUser = props.loginUserDetail.id > 0 ? [props.loginUserDetail.id] : [];

console.log("loggedInUser= ",loggedInUser);


const title =
    props.contactType === contactTypesEnum[1] ? 'Select MMS contact person' : 'Select Industry contact person';

return (
    <Modal
        title={title}
        visible={props.isVisible}
        width={'60%'}
        afterClose={props.modalClose}
        onCancel={props.handleContactModalCancel}
        footer={[
            <Button key="back" onClick={props.handleContactModalCancel}>
                Cancel
            </Button>,
            <Button key="submit" type="primary" onClick={props.contactModalConfirm}>
                {/*<Button key="submit" type="primary" onClick={props.inputSubmit}>*/}
                Submit
            </Button>
        ]}
    >
        {/*<Form key={props.contactList}>*/}
        <Form>
           <div style={{ overflowY: 'scroll' }}>
                
               
               {/*<Checkbox.Group defaultValue={[defaultValue]} onChange={props.handleCheckedInput}>*/}
                    <Checkbox.Group defaultValue={loggedInUser} onChange={props.handleCheckedInput}>
                    <Row style={{ border: '1px solid #009FE3', paddingLeft: '10px' }}>
                        {props.contactList.map((elem: { fullName: string; id: number }, index: number) => {
                            return (
                                <Col key={index} span={8}>
                                    <Form.Item> 
                                        <Checkbox value={elem.id}>{elem.fullName}</Checkbox>
                                    </Form.Item>
                                </Col>
                            );
                        })}
                    </Row>
                </Checkbox.Group>
            </div>
        </Form>
    </Modal>
);

};

我传递的 props.loginUserDetail 看起来像，

export interface ContactLogin {
id:number;
fullName:string;

}

我非常正确地检查了 id 是否被填充并且具有非零正值。奇怪的是，如果我defaultValue={[12]} 对正确的复选框进行硬编码，但变量赋值defaultValue={[loggedInUser]}

在ant设计规范中我发现defaultValue类型应该是字符串所以我尝试使用，

const loggedInUser = props.loginUserDetail.id > 0 ? props.loginUserDetail.id.toString() : '';

但它也不起作用。如果变量值不可选择，那么 defaultValue={[12]} 也不应该工作。但是硬编码正在起作用。

这就是我调用自定义模式的方式，

这就是我调用模态的方式，

<ContactModal
            isVisible={modalVisibilty}
            //modalClose={modalClose}
            contactList={contactList} //this would be number of contact returned
            handleContactModalCancel={handleContactModalCancel}
            contactModalConfirm={contactModalConfirm}
            handleCheckedInput={handleCheckedInput}
            //contactListError={contactListError}
            contactType={contactType}
            loginUserId={contactType === contactTypesEnum[2]?loginUserDetail.id:0}
            //loginUserDetail={contactType === contactTypesEnum[2] ?loginUserDetail : {id:0,fullName:''}}

        />
            

有人可以帮我吗？非常感谢 ！

标签： reactjscheckboxreact-hooksantd