'React useForm equivalent in class component
I moved a functional component to class component recently and don't find the equivalent of useForm
when using a class.
Here is the code I used before:
var commentField = form.getState()["active"].replace(new RegExp("parameter_info$"), "comment");
form.change(commentField, result.comment);
With this, I was able to link two dynamicaly generated inputs.
How can I do it using a class?
Solution 1:[1]
FinalForm docs says useForm() is used internally inside useField(), <Field/>, and <FormSpy/>.
, so it's possible to write equivalent code using FormSpy
:
class Updater extends React.Component {
componentWillReceiveProps(nextProps) {
var commentField = this.props.form.getState()["active"].replace(new RegExp("parameter_info$"), "comment");
this.props.form.change(commentField, result.comment);
}
render() {
return null;
}
}
You need to render <FormSpy subscription={{ values: true }} component={Updater} />
somewhere in your form to make it work.
Note that you can use final-form-calculate
package to implement calculations between fields.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|---|
Solution 1 | Evgeny Timoshenko |