Auto Calculate Input Fields

问题

Please could someone help answer this:

I have 2 NumberInput controls, one input and the other is disabled. I need to input number in the first input field, the disabled field to show this number/100. The two NumberInput will have source fields that will save to the current record in the simpleform.

How do I do this in react-admin

Thanks

回答1:

Easiest way is to use the method described in the docs under section Linking two inputs

In essence: You can create your own input component where you can access the form values via the hook useFormState. Then just assign the desired value transformed the way you want e.g. divided by 100.

Edit

Found one more even cleaner way - using the final-form-calculate to create a decorator and pass it to the <FormWithRedirect /> component like so:

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]}
/>

Check out this code sandbox

回答2:

Using FormDataConsumer

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

Using the useFormState hook

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

...

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

...

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

Source: https://marmelab.com/react-admin/Inputs.html#linking-two-inputs

Dynamic

You need to use the useForm hook of react-final-form to make your input dynamic:

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

回答3:

I got a shorter solution to this question: All I did was to do the calculation within FormDataConsumer. Now, I am able to get the calculated value and it updates the correct record in the array.

Thanks

<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')} />
      )
    }            
  }}

来源：https://stackoverflow.com/questions/64811031/auto-calculate-input-fields

标签

react-admin