How to us "onChange" of one field and get/set value to other field?

[thearabbit]

I would like to use onChange of one field and get/set value to other field.
Ex: I have Payment Form of Invoice

handlePaidAmountChange = (value) => {
   let totalAmount = // how to get value from totalAmount Field
   let balance = totalAmount - value;
   // how to set new value to balance Field 
};
-------
<AutoField  name="totalAmount" value={5000} /> // due amount of invoice
<AutoField name="paidAmount" onChange={(value) => this.handlePaidAmountChange(value)} />
<AutoField name="balance" />

Please help me.

[thearabbit]

Oh now I use onChange on Form

<AutoForm
                    schema={Payments.schema}
                    showInlineError={true}
                    onSubmit={this.handleSubmit}
                    onChange={(key, value) => {
                         console.log(key, value);
                         // how to set value to balance field?
                         this.balanceField.value(????????) // example???
                    }}
                >
<AutoField  name="totalAmount" value={5000} /> // due amount of invoice
<AutoField name="paidAmount" />
<AutoField name="balance" />

Please

[thearabbit]

Not good for

onChange={(key, value) => {
                         console.log(key, value);
                         // how to set value to balance field?
                         $('[name="balance"]').val(1000)
                    }}

[thearabbit]

today I tried

handleSubmit = (doc) => {
        console.log(doc);
    };
-------
<AutoForm
                    schema={Payments.schema}
                    showInlineError={true}
                    onSubmit={this.handleSubmit}
                    onChange={(key, value) => {
                        if (key == "paidAmount") {
                            $('[name="balance"]').val(value);
                        }
                    }}
                >
                    <AutoField name="paidAmount" {...formItemLayout} />
                    <AutoField name="balance" disabled={true} {...formItemLayout} />

                </AutoForm>

but can't get balance value when try to change paidAmount and submit

Object {paidAmount: 50, balance: 0}

[janowsiany]

Most straightforward solution is:

const Amount = ({onChange, ...props}) =>
    <AutoField
        {...props}
        onChange={value => {
            onChange(value);
            onChange(value * 2, 'balance');
        }}
    />
;

export default connectField(Amount, {ensureValue: false, includeInChain: false});

<AmountField name="amount" />
<AutoField name="balance" />

Please keep your statements more clear in the future. Also please do not create multiple comments, edition of the first will be fine. It will help to keep this repository neat.

[thearabbit]

Sorry, I will try soon.

[thearabbit]

Now I tried, but still don't work.
It always clear on amount field when typing.

[zeroasterisk]

@thearabbit did you remove the onChange from the Form level? try it only in the Field level.

onChange at the form level is probably not what you want --- use @janowsiany 's suggestion with a custom connected field.

Still having problems? Can you make an example repo with this one bad use case? I'd clone and try it out for you.

FYI: I have a formable HOC which I use to give me access to the formRef which gives me access to all the functionality for any form instance, like getModel() and change()
#97 (comment)

[tab00]

Calling onChange() from within onChange() leads to recursion.

I've found onChange() in uniforms components to be unreliable. I've switched to plain HTML elements for the timebeing just to get things working.

[radekmie]

Calling onChange() from within onChange() leads to recursion.

It depends on where and which onChange are you calling.

I've found onChange() in uniforms components to be unreliable.

Could you say something more?

[kletkeman]

I have an extremely responsive form, albeit not quite perfect. What I did was to use a modern functional react component with useState to set the model to internal state. The key for every change you want to see and then make is to always update the model itself so the next render is accurate.

const [model, setModel] = useState(props.propertyname ? _.cloneDeep(props.propertyname) : _.cloneDeep(defaultPropertyname));

Thus, you must be willing to clone the complete model on every key stroke. Every field should have an onChanged function that follows this (now obvious to me) pattern:

    function fieldnameChanged(g) {
        let new_model = _.cloneDeep(model);
        new_model.fieldname = g;
        setModel(new_model);
    }

You can imagine that you can do any amount of processing to change the value of related fields in this function and set the final model to reflect the new state. It works fast and reliably. Your onSubmit will of course do something with this state (like writing to the database etc).