'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