Question

我正在开发基于蚂蚁设计的React功能应用程序。使用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]}的分配是

在蚂蚁设计规范中，我发现defaultValue类型应该为字符串，因此我尝试使用

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

但是它也不起作用。如果无法选择变量值，则defaultValue = {[12]}也不起作用。 BUt硬编码正在工作。

这就是我所谓的自定义模式，

这就是我所说的模式

<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:''}}

        />

有人可以在这里帮助我吗？非常感谢！

蚂蚁设计的Checkbox.Group React无法设置默认值

0 个答案: