[英]How can I set data on a Select component with Ant Design?
I've been using Ant Design with Javascript to build a table in which you can edit a row information just by clicking an edit button and the row will turn into "editing mode", this allows you to visualize the information that was already there but now is editable.我一直在使用Ant Design with Javascript 来构建一个表格,您可以在其中编辑行信息,只需单击编辑按钮,该行将变为“编辑模式”,这使您可以可视化已经存在但现在是可编辑的。 I was able to accomplish that will every kind of input except with the Select componen.
除了 Select 组件之外,我能够完成所有类型的输入。 As you can see in the next screenshot (I framed the fields that are Select Components): fields in which I used Select Component
正如您在下一个屏幕截图中看到的(我将 Select 组件的字段框起来):我在其中使用了 Select 组件的字段
Now, when I click the "Edit" button I retrieve all data except for the ones that use the Select Component as you can see in the next screenshot : Select Component doesn't shows the existing data现在,当我单击“编辑”按钮时,我会检索所有数据,但使用 Select 组件的数据除外,您可以在下一个屏幕截图中看到: Select 组件不显示现有数据
The next block of code is the one that I've been using to set the data in editing mode:下一段代码是我用来在编辑模式下设置数据的代码:
const edit = (record) => {
form.setFieldsValue({
...record
});
setEditingKey(record._id);
};
This is the code for the table:这是表的代码:
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>
);
And this is the "EditableCell" that appears when the user clicks on the edit button:这是当用户点击编辑按钮时出现的“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>
);
};
So if anyone knows how to set the data that was already saved so the user can see it when it's editing, I'd be grateful.因此,如果有人知道如何设置已保存的数据以便用户在编辑时可以看到它,我将不胜感激。
You are using the form.setFieldsValue
method, but as I can see, your Select
is just not wrapped by Form.Item
element to be part of the form instance.您正在使用
form.setFieldsValue
方法,但正如我所见,您的Select
并未被Form.Item
元素包装为表单实例的一部分。
So you can wrap your Select by Form.Item
as you do for others inputNode
or rewrite your conditional logic to add select as inputNode
inside existing Form.Item
所以你可以用 Form.Item 包装你的
Form.Item
就像你为其他inputNode
所做的那样,或者重写你的条件逻辑以将 select 添加为现有inputNode
中的Form.Item
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.