javascript - 状态改变后antd表单初始值不更新
问题描述
我有一张显示学校名称及其费用或费率的表格。表格中有一个按钮可以打开包含此组件或表单的抽屉。表格中有一个按钮可以切换抽屉的状态。只要我只是通过单击按钮来读取表单中的值,我的 initalValue 就会更新。但是,如果我为任何 1 个条目更新价格并提交表格,那么我的价格或学校的初始值不会因其他条目或学校而改变。虽然我的状态正在相应地发生变化,但我确实通过渲染状态进行了检查。但是我的表单初始值没有相应更新
import React, { useState, useEffect } from 'react'
import { Table, Button, Popconfirm, Drawer, Form, Input, Select, notification } from 'antd'
const { Option } = Select
const layout = {
labelCol: {
span: 10,
},
wrapperCol: {
span: 10,
},
}
const tailLayout = {
wrapperCol: {
offset: 7,
span: 14,
},
}
function SchoolRates({ form, relevantData }) {
const [rates, setRates] = useState(null)
useEffect(() => {
setRates(relevantData)
}, [someCondition])
const updateRates = e => {
e.preventDefault()
form.validateFields((error, values) => {
console.log(error, values, 'forms')
})
return 'Data Updated'
}
return (
<>
<div>
{`${rates?.schoolName}, ${rates?.Price}`}
</div>
<Form {...layout} initialValue={rates} onSubmit={e => updateRates(e)}>
<Form.Item label="Country" style={{ marginBottom: '5px' }} size="small">
{form.getFieldDecorator('schoolName', {
initialValue: rates?.schoolname,
rules: [{ required: true, message: 'Please select a school!' }],
})(
<Select
placeholder="School"
allowClear
size="small"
style={{ borderRadius: 0 }}
>
{schoolList.map(item => (
<Option value={item}>{item}</Option>
))}
</Select>,
)}
</Form.Item>
<Form.Item label="Price / Learner" style={{ marginBottom: '5px' }} size="small">
{form.getFieldDecorator('price', {
initialValue: rates?.price,
rules: [{ required: true, message: 'Please enter price/learner' }],
})(
<Input
size="small"
type="number"
style={{ borderRadius: 0 }}
/>,
)}
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit" size="small">
Save
</Button>
</Form.Item>
</Form>
</>
)
}
export default Form.create()(UpdateRates)
我只想在我的表格中单击其他学校后立即重新呈现完整的表格以更新数据
解决方案
要更新 initialValue 表单输入字段,需要清理或重置。因此,在成功提交表单后添加 form.resetFields()(重置输入字段中的数据)。
推荐阅读
- python - 如何制作修复href链接的功能?
- javascript - 有没有办法在链接上旋转悬停突出显示?(不是元素)
- reactjs - 在 React 和 Material UI 中显示星期几和时间
- flutter - 不强制转换的子类对象的访问字段
- java - maven 可以推断和/或构建适当的目录结构
- php - 如何在php中获取上一个和下一个数组值?
- java - 如何保存 CheckedTextView 复选框的状态,以便在退出后保持选中状态?
- c++ - 将转换复制到 C++ 中的标准容器
- ios - react-native run-ios 构建失败并出现错误
- r - 从多列而不是单列聚合数据