Antd form.create is used

Let’s start with the use case for Form in ANTD. The class function is wrapped in form.create (). The component wrapped in form.create () has the this.props. Form property. Higher-order components themselves are applications of the decorator pattern that can be used to write code more elegantly using the decorator syntax in ES7. Decorators can only be used on classes, executed from the bottom up.)

  • GetFieldDecorator is used for bidirectional binding with the form
  • GetFieldsValue gets the values of a set of input controls or, if no arguments are passed, the values of all components by default
  • GetFieldValue gets the value of an input control
  • ValidateFields validates and retrieves a set of input field values and errors, and validates all components if the fieldName parameter is null
import React, {Component} from "react";
import {Form, Input, Icon, Button} from "antd"; /// const nameRules = {required:true, message: "please input ur name"};
const passwordRules = {required: true, message: "please input ur password"};

@Form.create({})
class FormPage2 extends Component {
  submit = () => {
    const {getFieldsValue, getFieldValue, validateFields} = this.props.form;
    validateFields((err, values) => {
      if (err) {
        console.log("err", err); 
      } else {
        console.log("success", values); }}); // console.log("submit", getFieldsValue(), getFieldValue("name")); 
  };
  render() {
    console.log("props", this.props); 
    const {getFieldDecorator} = this.props.form;
    return (
      <div>
        <h3>FormPage2</h3>
        <Form>
          <Form.Item>
            {getFieldDecorator("name", {rules: [nameRules]})(
              <Input placeholder="please input ur name" />
            )}
          </Form.Item>
          <Form.Item>
            {getFieldDecorator("password", {rules: [passwordRules]})(
              <Input type="password" placeholder="please input ur password" />
            )}
          </Form.Item>
          <Button type="primary"OnClick ={this.submit}> </Button> </Form> </div>); }}export default FormPage2;

Copy the code

Notes on using HOC higher-order components: HOC is an advanced technique for reusing components in React. It is not part of the React API, but a design pattern based on the composite features of React.

  • Instead of using HOC in render methods, React’s diff algorithm uses tokens to determine whether it should update an existing subtree or discard and mount a new one. If the component returned from Render is the same as the one in the previous render, React updates the subtree recursively by differentiating it from the new subtree. If they are not equal, unload the previous subtree completely. Remounting a component causes the state of that component and all its children to be lost.

Follow antD principle to achieve their own table bidirectional binding

The MyFormPage component introduces kFormCreate higher-order functions to decorate and extend existing forms to achieve bidirectional binding.

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

const nameRules = {required: true, message: "please input ur name"};
const passwordRules = {required: true, message: "please input ur password"};

@kFormCreate
class MyFormPage extends Component {
  submit = () => {
    const {getFieldsValue, getFieldValue, validateFields} = this.props;
    validateFields((err, values) => {
      if (err) {
        console.log("err", err); 
      } else {
        console.log("success", values); }}); console.log("submit", getFieldsValue(), getFieldValue("password"));
  };
  render() {
    console.log("props", this.props); 
    const {getFieldDecorator} = this.props;
    return (
      <div>
        <h3>MyFormPage</h3>
        {getFieldDecorator("name", {rules: [nameRules]})(
          <input type="text" placeholder="please input ur name" />
        )}
        {getFieldDecorator("password", {rules: [passwordRules]})(
          <input type="password" placeholder="please input ur password"/ >)} < button onClick = {this. Submit} > submit < / button > < / div >). }}export default MyFormPage;

Copy the code

KFormPage component code implementation is as follows:

import React, {Component} from "react";

export default function kFormCreate(Cmp) {
  return class extends Component {
    constructor(props) {
      super(props);
      this.state = {};
      this.options = {};
    }
    handleChange = e => {
      // setState name value
      let{name, value} = e.target; this.setState({[name]: value}); }; GetFieldDecorator = (field, option) => {this.options[field] = option;returnInputCmp => {// Clone a copyreturn React.cloneElement(InputCmp, {
          name: field,
          value: this.state[field] || "", onChange: this.handleChange }); }; }; // Collect all the registered fields, and thenreturnGetFieldsValue = () => {return{... this.state}; }; getFieldValue = field => {returnthis.state[field]; }; ValidateFields = callback => {const errors = {}; const state = {... this.state};for (let name in this.options) {
        if(state[name] === undefined) {// No input, errors[name] ="error"; }}if (JSON.stringify(errors) === "{}") {// Callback (undefined, state); }else{ callback(errors, state); }};render() {
      return (
        <div className="border"> <Cmp getFieldDecorator={this.getFieldDecorator} getFieldsValue={this.getFieldsValue} getFieldValue={this.getFieldValue} validateFields={this.validateFields} /> </div> ); }}; }Copy the code