I'd like to do some responsive logic, where when a value changes it triggers other values to change in a form.
I'm using mantine forms, and so far the best approach I've been able to come upon is something like the following:
const onUserChange = (e) => {
// form.values.acounts.user contains the previous user value
// e contains the incoming update to it
form.setFieldValue('other.property.associated.with.user', e);
}
<Select label="User"
data={users}
{...form.getInputProps(`accounts.user`)}
onChange={(e) => {
onUserChange(e);
form.getInputProps(`accounts.user`).onChange(e)
}}
></Select>
This approach 'seems' to be decent, but I'm not sure if there's a better way. Anyone come across this before? Maybe some neat callback syntax or something?
It turns out the library doesn't do much magic in regards to the onchange, and effectively just sets the form value via form.setFieldValue. As long as the onchange provided sets the value you don't need to re-reference the onchange gotten from 'getInputProps'
Update: enhancedInputProps could be useful to accomplish this depending on use case:
https://mantine.dev/form/get-input-props/#enhancegetinputprops