[英]Calculate total in dynamic form - Ant Design React
我在 Ant 设计中有一个动态表格,我可以:
使用这段代码提交后,我能够访问行中的所有值:
const onFinish = values => {
console.log("Received values of form:", values);
};
但我想从输入中访问每个值,获取总数(价格 * 数量)并将其设置为总输入。
我从这个问题Calculating quantity and price total in react中看到了基本 React 的解决方案。 该答案表明您需要使用 state 并使用 onChange 事件并从那里开始工作,但我真的不知道如何翻译此答案,因为我不明白如何从 Z938DB156AD9B67FA1D4276 中的每一行访问 state。
你可以在这里看到我的代码: https://codesandbox.io/s/stupefied-hawking-pcr7k?file=/index.js:260-348
任何帮助,将不胜感激
您可以利用Form
组件上的onValuesChange
事件处理程序以及Form.useForm
挂钩提供的form
实例方法来计算派生值。
请参阅沙盒示例:
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"
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.