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

Writing in the front

• The previous article briefly described the changes from RC-form to RC-field-form and demonstrated the use of rC-field-form
• In today’s article we will implement and improve our own RC-Field-form step by step

Implementing the Input component

• Let’s simply wrap an Input component to use as a data Input component in our business development

export function Input(props) {
  const { value = "". otherProps } = props;return <input style={{ outline: "none"}}value={value} {. otherProps} / >;
}
Copy the code

• Why not just use the input box
• It actually has something to do with how we use it

<Field name="user" label="Account" rules={userRules}>
    <Input placeholder="Please enter your account number" />
</Field>
Copy the code

• If you use input directly, you need to set a value to it, but as we said earlier, the values of all data input components need to be managed uniformly
• This data-managed operation is done in the Field component, and when you use the Input component, you don’t get the value
• So there’s a layer of encapsulation here, taking the value from props, which defaults to an empty string""To avoid uncontrolled component errors during data input if the value is not transmitted

• Finally, when the data is entered, inside the Field component, the managed value is passed to the Input component, and the value in the Input component’s props becomes the actual Input data

Creating a data warehouse

• We need to create a unified store used to hosting storage, the user input data, then let all the components to get the data directly in the store, such a data input components of data change, also used to update their can, does not cause other data update input component, at the same level to avoid performance waste to the greatest extent
• Let’s create a FormStore that manages all the data for the Form component

class FormStore {
  constructor() {
    this.store = {}; // Used to store component data
  }

  // Implement the operation state method get set
 
 // Set operation for multiple fields
  setFieldsValue = (newStore) = > {
    this.store = { ... this.store, ... newStore, }; };// Get operation for multiple fields
  getFieldsValue = () = > ({ ...this.store });

  // Set operation for a single field
  setFieldValue = (field, val) = > {
    this.setFieldsValue({ [field]: val });
  };

  // Get for a single field
  getFieldValue = (fieldName) = > this.store[fieldName];

  // A method to expose the operating state
  getForm = () = > ({
    getFieldsValue: this.getFieldsValue,
    setFieldsValue: this.setFieldsValue,
    setFieldValue: this.setFieldValue,
    getFieldValue: this.getFieldValue,
  });
}
Copy the code

• In the FormStore example above, store is used to store data
• Four methods are implemented, among which setFieldsValue and getFieldsValue are used for multi-field data storage and retrieval, setFieldValue and getFieldValue are used for single-field data storage and retrieval
• Finally, a getForm method is implemented to expose the operation methods of the data warehouse store

summary

• In this article, we created a data warehouse outside of the component to centrally manage all the data for the Form component
• The data warehouse is independent of the forms, so how do they interact with each other? How do I update the data and get the corresponding components to update?
• We’ll address that in the next article

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 🥰