自动计算输入字段

Question

请有人帮忙回答一下：

我有 2 个 NumberInput 控件，一个输入，另一个被禁用。我需要在第一个输入字段中输入数字，禁用字段显示此 number/100。两个 NumberInput 将具有源字段，这些字段将以简单形式保存到当前记录。

如何在 react-admin 中执行此操作

谢谢

Answer 1

最简单的方法是使用 Linking two inputs

节下的文档中描述的方法

本质上：您可以创建自己的输入组件，您可以在其中通过挂钩 useFormState 访问表单值。然后只需按您想要的方式分配所需的值即可，例如除以 100.

编辑

找到了一种更简洁的方法 - 使用 final-form-calculate 创建装饰器并将其传递给 <FormWithRedirect /> 组件，如下所示：

import createDecorator from 'final-form-calculate'

const calculator = createDecorator(
  // Calculations:
{
   field: 'number1', // when the value of foo changes...
   updates: {
     number2: (fooValue, allValues) => allValues["number1"] * 2
   }
})

...

<FormWithRedirect
   ...
   decorators={[calculator]}
/>

看看这个code sandbox

Answer 2

使用 FormDataConsumer

<FormDataConsumer>
  {({ formData }) => (
    <NumberInput defaultValue={formData.my_first_input / 100} source="second_input"/>
  )}
</FormDataConsumer>

使用 useFormState 钩子

import { useFormState } from 'react-final-form';

...

const { values: { my_first_input }} = useFormState({ subscription: { values: true } });

...

<NumberInput defaultValue={my_first_input / 100} source="second_input"/>

来源：https://marmelab.com/react-admin/Inputs.html#linking-two-inputs

动态

您需要使用 react-final-form 的 useForm 挂钩来使您的输入动态化：

import { useForm, useFormState } from 'react-final-form';

...

const {change} = useForm();
const { values: { my_first_input }} = useFormState({ subscription: { values: true } });


useEffect(() => {
  change('my_second_input', my_first_input / 100);
}, [change, my_first_input]);

...


<NumberInput defaultValue={my_first_input / 100} source="second_input"/>

Answer 3

我得到了这个问题的更简短的解决方案：我所做的只是在 FormDataConsumer 内进行计算。现在，我可以获得计算值并更新数组中的正确记录。

谢谢

<FormDataConsumer>
  {({
    formData, // The whole form data
    scopedFormData, // The data for this item of the ArrayInput
    getSource, // A function to get the valid source inside an ArrayInput
    ...rest
  }) => {
    if (typeof scopedFormData !== 'undefined') {
      scopedFormData.total = scopedFormData.quantity * scopedFormData.unitprice;
      return (
        <NumberInput disabled defaultValue={scopedFormData.total} label="Total" source={getSource('total')} />
      )
    } else {
      return(
        <NumberInput disabled label="Total" source={getSource('total')} />
      )
    }            
  }}

自动计算输入字段

Auto Calculate Input Fields

react-admin

使用 FormDataConsumer

使用 useFormState 钩子

动态