如何使用 Ant Design 在 Select 組件上設置數據？

Question

我一直在使用Ant Design with Javascript 來構建一個表格，您可以在其中編輯行信息，只需單擊編輯按鈕，該行將變為“編輯模式”，這使您可以可視化已經存在但現在是可編輯的。 除了 Select 組件之外，我能夠完成所有類型的輸入。 正如您在下一個屏幕截圖中看到的（我將 Select 組件的字段框起來）：我在其中使用了 Select 組件的字段

現在，當我單擊“編輯”按鈕時，我會檢索所有數據，但使用 Select 組件的數據除外，您可以在下一個屏幕截圖中看到： Select 組件不顯示現有數據

下一段代碼是我用來在編輯模式下設置數據的代碼：

const edit = (record) => {

        form.setFieldsValue({
            ...record
        });

        setEditingKey(record._id);
    };

這是表的代碼：

return (
        <Form form={form} component={false}>
            <Space align="start" wrap={true}>
                <Button
                    onClick={handleAdd}
                    type="primary"
                    style={{
                        marginBottom: 16,
                    }}
                    size='large'
                >
                    Añadir Usuario
                </Button>
                <AutoComplete
                    dropdownMatchSelectWidth={252}
                    style={{
                        width: 300
                    }}
                >
                    <Input.Search size='large'
                        placeholder="Buscar..."
                        enterButton
                        onSearch={(value) => {
                            setSearchedText(value);
                        }}
                    />
                </AutoComplete>

            </Space>
            <Table
                locale={{
                    triggerDesc: 'Ordenar descendiente',
                    triggerAsc: 'Ordenar ascendiente',
                    cancelSort: 'Cancelar ordenamiento'
                }}
                rowKey={record => record._id}
                components={{
                    body: {
                        cell: EditableCell,
                    },
                }}
                bordered
                dataSource={data}
                columns={mergedColumns}
                rowClassName="editable-row"
                pagination={{
                    onChange: cancel,
                    pageSize: 10
                }}
                scroll={{ x: 2150 }}
            />
        </Form>
    );

這是當用戶點擊編輯按鈕時出現的“EditableCell”：

const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
}) => {
    const inputNode = dataIndex === "password" ? <Input.Password /> : <Input />;
    return (
        <td {...restProps}>
            {editing ? (
                <>
                    {(title === "Sexo*" || title === "Discapacidad" || title === "Rol*" || title === "Tutor*") ? (
                        <Select
                            mode={(title === "Discapacidad") ? "multiple" : ""}
                            allowClear={(title === "Discapacidad") ? true : false}
                            style={{
                                width: '100%',
                            }}
                            placeholder="Seleccione una opción"
                            onChange={(val) => {
                                const col = selectedValues.find(column => column.title === title);
                                if (title === "Discapacidad") {
                                    let newArray = [...val]
                                    if (col.values.includes([...val])) {
                                        newArray = newArray.filter(disa => disa !== [...val])
                                    }
                                    col["values"] = newArray;
                                } else if (title === "Sexo*" || title === "Rol*" || title === "Tutor*") {
                                    col["values"] = val;

                                }
                            }}
                        >
                            {options(title)}
                        </Select>
                    ) : (
                        <Form.Item
                            name={dataIndex}
                            style={{
                                margin: 0,
                            }}
                            rules={[
                                {
                                    required: (title === 'Fundación') ? false : true,
                                    message: `¡Introduzca un ${title} válido!`,
                                    pattern: rules(dataIndex),
                                },
                            ]}
                        >
                            {inputNode}
                        </Form.Item>
                    )}
                </>
            ) : (
                children
            )}
        </td>
    );
};

因此，如果有人知道如何設置已保存的數據以便用戶在編輯時可以看到它，我將不勝感激。

Answer 1

您正在使用form.setFieldsValue方法，但正如我所見，您的Select並未被Form.Item元素包裝為表單實例的一部分。

所以你可以用 Form.Item 包裝你的Form.Item就像你為其他inputNode所做的那樣，或者重寫你的條件邏輯以將 select 添加為現有inputNode中的Form.Item