javascript - 以动态形式计算总数 - Ant Design React
问题描述
我在 Ant Design 中有一个动态表单,我可以:
- 在一些投入中设定价格和数量。
- 创建新行
使用这段代码提交后,我能够访问行中的所有值:
const onFinish = values => {
console.log("Received values of form:", values);
};
但我想从输入中访问每个值,获取总数(价格 * 数量)并将其设置为总输入。
我从这个问题Calculating quantity and price total in react中看到了基本 React 的解决方案。该答案表明您需要使用状态并使用 onChange 事件并从那里开始工作,但我真的不知道如何翻译此答案,因为我不明白如何从 Ant Design 中的每一行访问状态。
你可以在这里看到我的代码:https ://codesandbox.io/s/stupefied-hawking-pcr7k?file=/index.js:260-348
任何帮助,将不胜感激
解决方案
您可以利用组件onValuesChange
上的事件处理程序以及挂钩提供的实例方法来计算派生值。Form
form
Form.useForm
请参阅沙盒示例:
const ItemForm = () => {
const [form] = Form.useForm()
const onFinish = values => {
console.log('Received values of form:', values)
}
const handleTotal = (_, values) => {
const rowsCopy = [...values.rows]
values.rows.forEach((fieldGroup, index) => {
if (fieldGroup && fieldGroup.quantity && fieldGroup.price) {
fieldGroup.total = fieldGroup.quantity * fieldGroup.price
rowsCopy.splice(index, 1, fieldGroup)
console.log('fieldGroup', fieldGroup)
console.log('rowsCopy', rowsCopy)
form.setFieldsValue({ rows: rowsCopy })
}
})
}
return (
<Form
name="dynamic_form_nest_item"
form={form}
onFinish={onFinish}
onValuesChange={handleTotal}
autoComplete="off"
size="small"
>
推荐阅读
- sql - 如何使用以下输出的日期功能
- windows - CryptStringToBinary 错误?还是我不明白什么?
- wordpress - 如何使用 Timber / Twig 将脚本排入队列 | 为什么这不起作用?
- ios - 在 Xcode 上找不到框架 FirebaseInstanceID
- r - 将数据帧转置为列 R 中的模式变化
- python-3.x - 单击 Flask 上的提交(表单)时,如何保留我放在 TextArea 上的文本?
- excel - 在非活动工作表中更新 Excel 中的 UDF 时出错
- c++ - 递归函数c ++的复杂性
- azure - Azure DevOps - 复制文件任务:不允许使用与号 (&) 字符
- windows - 为批处理文件命令循环