英文:
how to auto populate form fields using data from the server?
问题
我在React中创建了一个表单。当用户在“gage id”字段中输入一个值时，如果该值存在于数据库中，系统应该自动填充基于该输入的其他字段。在React中，我该如何实现这一点？
以下是我的代码：
function WorkOrderRef() {
const [form] = Form.useForm()
const [id, setId] = useState()
const [gageInfo, setGageInfo] = useState()
const meta = {
columns: 2,
fields: [
{
key: "Id",
label: "ID",
placeholder: "",
onChange: (e) => setId(e.target.value),
},
{
key: "description",
label: "Description",
placeholder: "",
//value: referenceData.name,
},
{
key: "serial number",
label: "Serial Number",
placeholder: "",
},
{
key: "due date",
label: "Due Date",
placeholder: "",
widget: "date-picker",
},
{
key: "colibration",
label: "Colibration",
widget: "select",
options,
},
],
}
useEffect(() => {
try {
if (id) {
console.log(id)
fetch(`api/id=${id}`)
.then((result) => result.json())
.then((response) => setGageInfo(response))
}
} catch (e) {
console.log(e)
}
}, [id])
return (
<>
<Form form={form} onFinish={handleFinish}>
<FormBuilder meta={meta} form={form} />
<Form.Item className="ant-form-item--btn">
<Button type="primary" htmlType="submit">
Add
</Button>
</Form.Item>
</Form>
</>
)
}
export default WorkOrderRef
实际上，我可以从服务器获取与“gage id”相关的数据，但我发现在表单字段中显示这些数据很有挑战性。在React中，我应该如何实现这一点？
英文:
I created a form in React. When the user enters a value in the 'gage id' field, if that value exists in the database, the system should automatically populate other fields based on that input. How can I achieve this in React?
hear is my code:
function WorkOrderRef() {
const [form] = Form.useForm()
const [id, setId] = useState()
const [gageInfo, setGageInfo] = useState()
const meta = {
columns: 2,
fields: [
{
key: "Id",
label: "ID",
placeholder: "",
onChange: (e) => setId(e.target.value),
},
{
key: "description",
label: "Description",
placeholder: "",
//value: referenceData.name,
},
{
key: "serial number",
label: "Serial Number",
placeholder: "",
},
{
key: "due date",
label: "Due Date",
placeholder: "",
widget: "date-picker",
},
{
key: "colibration",
label: "Colibration",
widget: "select",
options,
},
],
}
useEffect(() => {
try {
if (id) {
console.log(id)
fetch(`api/id=${id}`)
.then((result) => result.json())
.then((response) => setGageInfo(response))
}
} catch (e) {
console.log(e)
}
}, [id])
return (
<Fragment>
<Form form={form} onFinish={handleFinish}>
<FormBuilder meta={meta} form={form} />
<Form.Item className="ant-form-item--btn">
<Button type="primary" htmlType="submit">
Add
</Button>
</Form.Item>
</Form>
</Fragment>
)
}
export default WorkOrderRef
In reality, I can fetch data related to the "gage id" from the server, but I'm finding it challenging to display that data in the form fields. How can I make this happen in React?
答案1
得分: 1
你应该使用form.setFieldsValue。请查看这个 antd 文档的部分。
正如你在按钮组件中所看到的，它会重置表单的所有字段，但你也可以使用它来向你的表单分配数据：
<Button onClick={() => form.setFieldsValue({
description: '项目描述',
'serial number': 'abc123',
// 其他字段...
})} />;
英文:
You should use `form.setFieldsValue. Take a look into this section of antd docs.
As you can see in Button component, it's reseting all fields of the form but you can use this to assign data to your form too:
<Button onClick={() => form.setFieldsValue({
description: 'item description',
'serial number': 'abc123'
...
})} />;
答案2
得分: 0
使用initialValues来从数据库填充数据的另一种方法是像这样操作：
<Form
initialValues={{ description: currentObj?.description }}
onFinish={onFinish}
请注意，我已经将代码部分保留在原样，并只翻译了相关文本。
英文:
other way to populate with data from db is using initialValues like this you can do that:
<Form
initialValues={{ description: currentObj?.description }}
onFinish={onFinish}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论