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

Writing in the front

• In the previous article, we implemented a custom Hook useForm for easy access to data warehouse operation permission objects
• In order for the Form component’s descendants to obtain the same data warehouse operation permission object, we chose to use the Context API to pass the data warehouse operation permission object obtained in the Form component across the hierarchy
• So let’s do that

Pass the operation permission object of the data warehouse across the hierarchy

• To use context, you need to create a context object. Here’s how to do it

// FormContext.js

import React from "react";

export const FormContext = React.createContext();
Copy the code

• We create a new formContext.js file and create a context object using the react.createcontext () method
• With the Context object, we can pass the data warehouse operation permission object on the Form component. Here’s how to do it

import React from "react";
import { FormContext } from "./FormContext";
import { useForm } from "./useForm";

export default function Form({ children }) {
  const [formStore] = useForm();
  return (
    <form>
      <FormContext.Provider value={formStore}>{children}</FormContext.Provider>
    </form>
  );
}
Copy the code

• We simply wrap the children with formContext.provider
• Once the context object is created and passed through the provider, our Field component is ready to use

Implementing the Field component

• Here we use class to implement the Field component, so we can use static contextType to get the context passed by the upper component
• Here is the implementation code

import React, { Component } from "react";
import { FormContext } from "./FormContext";

export class Field extends Component {
  static contextType = FormContext;

  // Change the received component to a controlled component
  getControlled = () = > {
    const { name } = this.props;
    const { setFieldValue, getFieldValue } = this.context;

    return {
      value: getFieldValue(name),
      onChange(e) {
        constnewVal = e.target.value; setFieldValue(name, newVal); }}; };render() {
    const controlledChild = React.cloneElement(
      this.props.children,
      this.getControlled()
    );
    returncontrolledChild; }}Copy the code

• The most critical of the above implementations is the getControlled method
  • It is based on the name property in props that the Field component accepts
  • And get the context, which is the method in the data warehouse operation permission object for storing and fetching individual field data setFieldValue, getFieldValue
  • Generates an object whose properties are the props for the children passed to the Field component, the data entry component
• Finally, the Render method of the Field component returns a new React element cloned from the React. CloneElement API
• It accepts the return value of getControlled() as props, so this new element is a controlled component
• Its data input is taken over, the input data is stored in the data warehouse, retrieved from the data warehouse using the getFieldValue method, and rendered

summary

• Above, we have implemented some of the functionality of the Field component
  • Gets the data warehouse operation permission object passed by the top-level Form component
  • Pass the data warehouse operation permission to the children of the Field component, via props, to make it a controlled component
• How does the children of the Field component update the render immediately after the data is entered?
• In the next article, we’ll tackle this problem

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 🥰