“This is the 34th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Writing in the front

• CreateForm allows users to manage their input data, manage their input data, and validate their data
• As mentioned earlier, createForm should support three things
  • Take over the input of user data and uniformly manage the input data
  • Verify Verify data correctness
  • Submit data
• In today’s article, we will continue to improve the data submission functionality in createForm

Submit data

• By submitting data, WE mean retrieving data from createForm’s centrally managed database
• In fact, very simple, here is the code implementation

    getFieldsValue = () = > {
      return this.state;
    };

    // It is an object passed when set
    setFieldsValue = (newValue) = > {
      this.setState(newValue);
    };
Copy the code

• GetFieldsValue is the method to get the data, just return this.state
• The opposite of getFieldsValue is setFieldsValue, which is used to set the data
  • At this point, you might be wondering why you need setFieldsValue because you already host data input
  • With setFieldsValue, we can set the data in code, such as setting a default value when the component is mounted
• Once these two methods are written, we need to expose them externally, that is, to the object returned by the getForm method

    getForm = () = > ({
      getFieldDecorator: this.getFieldDecorator,
      getFieldsValue: this.getFieldsValue,
      setFieldsValue: this.setFieldsValue,
      validateFields: this.validateFields,
    });

    render() {
      const { ...otherProps } = this.props;
      const form = this.getForm();

      return <Com {. otherProps} form={form} />;
    }
Copy the code

Verify the feasibility of createForm

• Let’s take a look at the full demo code

import React, { Component } from "react";
// import { createForm } from "rc-form";
import { createForm } from "./components/createForm";
import { Input } from "./components/Input";

const rules = {
  user: { required: true.message: "Please enter user name!" },
  pwd: { required: true.message: "Please enter your password!"}}; @createFormexport class MyCreateFormDemo extends Component {
  submit = () = > {
    const { form } = this.props;
    const allValue = form.getFieldsValue();
    console.log(allValue);

    form.validateFields(({ err, value }) = > {
      if (err) {
        console.log("error:", err);
      } else {
        console.log("success", value); }}); }; renderField =(type) = > {
    const { form } = this.props;

    return form.getFieldDecorator(type, { rules: [rules[type]] })(
      <Input placeholder={type} />
    );
  };

  componentDidMount() {
    const { form } = this.props;
    form.setFieldsValue({ user: "defaultVal" });
  }

  render() {
    const { form } = this.props;
    console.log(form);

    return (
      <div>
        {this.renderField("user")}
        {this.renderField("pwd")}
        <button onClick={this.submit}>submit</button>
      </div>); }}Copy the code

• We implement a Submit method for the data submission of the MyCreateFormDemo component
  • Internally, all the data entered into the MyCreateFormDemo component can be retrieved via form.getFieldsValue
  • We just need to call form.validateFields to validate the data, and then perform the corresponding operation based on the validation result
• Here’s how the page function works:
• Click the Submit button when no data is filled in

• When filling out a data, click the Submit button

• When filling in all the data, click the Submit button

summary

• At this point, our minimal version of createForm implementation is complete
• So, are readers feeling esay
• However, there is a drawback to the rC-Form design. It uses high-level components to take over the input of user data and manage it in a unified manner
  • Which means all of themData entry moduleAfter the getFieldDecorator method conversion, the state of the component returned by createForm is used
  • Once there is a certainData entry moduleWhen data is received, the state of the uppermost component that manages the data changes, causing it to be updated
  • Because our own Form component receives props from the parent component, the component that manages the data at the top level, after the higher-order component transformation, our own form component also gets updates
  • Just oneData entry moduleWhen an update occurs, the entire Form component is updated, resulting in wasted performance
• Therefore, ANTD4 reconstructs the form component, replacing the RC-form with the RC-field-form
• The RC-field-form solves this problem nicely, using hooks + contenxt instead of higher-order components
• In the next article, we will continue writing the RC-field-form by hand

The last

• That’s all for today’s sharing, and you’re welcome to discuss it in the comments section 👏.
• If you feel that the article is written well, I hope you do not begrudge praise, everyone’s encouragement is the biggest power I share 🥰