React-Admin：如何在 1 更改后编辑另一个组件值（例如，小计+折扣=总计）？答案

【问题标题】：React-Admin: How to edit another Component value after 1 has changed (eg, subtotal+discount=total)?React-Admin：如何在 1 更改后编辑另一个组件值（例如，小计+折扣=总计）？
【发布时间】：2021-05-23 09:22:36
【问题描述】：

例如，我有一个 CreateInvoice 返回如下内容：

<[...] src='subtotal' />
<[...] src='discount' />
<[...] src='total' disabled />

每当小计或折扣发生变化时，可能在 onChange 中，我如何引用禁用的 total 组件来汇总来自 subtotal + discount 的 vals？

（如果答案与states 有关，那么代码示例会很棒——RA 似乎以不同的方式处理状态，而且我已经是 React 的新手，所以我对缺少 @ 感到非常困惑987654326@ RA 文档中的文档）

【问题讨论】：

标签： reactjs react-admin

【解决方案1】：

如果您将小计和折扣保持在状态。然后你可以将一个额外的 prop 传递给整个组件。

< ... src="total" total={subtotal + discount} />

【讨论】：

【解决方案2】：

您可以尝试使用<FormDataConsumer /> https://marmelab.com/react-admin/Inputs.html#linking-two-inputs

或者，您可以通过 useForm 属性直接利用 react-final-form。

import {useForm} from 'react-final-form';
const SubtotalInput = props => {
  const form = useForm();
  return (
    <TextInput src='subtotal' onChange={(event) => {
      const newSubtotal = parseFloat(event.target.value);
      form.change('total', newSubtotal + form.getState().values.discount);
    }} />
  )
}

【讨论】：