以动态形式计算总数 - Ant Design React

Question

我在 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

任何帮助将不胜感激

Answer 1

您可以利用Form 组件上的onValuesChange 事件处理程序以及Form.useForm 挂钩提供的form 实例方法来计算派生值。

请看沙盒示例：

https://codesandbox.io/s/antdesign-calculating-a-derived-value-using-dynamic-form-hgyzh?file=/index.js:229-1020

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"
    >