如何使用 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