React useForm equivalent in class component

user_10623489 0
Viewed 267

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?

react-final-form reactjs
1 Answers

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.

user_10177220
Related