the "basic" example and "error validation" example of the antd-mobile form, the code is as follows: https://mobile.ant.design/com.

1, "basic" example

import { List, InputItem, WhiteSpace } from "antd-mobile";
import { createForm } from "rc-form";

class BasicInputExample extends React.Component {
  componentDidMount() {
    // this.autoFocusInst.focus();
  }
  handleClick = () => {
    this.inputRef.focus();
  }
  render() {
    const { getFieldProps } = this.props.form;
    return (
      <div>
        <List renderHeader={() => "Customize to focus"}>
          <InputItem
            {...getFieldProps("autofocus")}
            clear
            placeholder="auto focus"
            ref={el => this.autoFocusInst = el}
          ></InputItem>
          <InputItem
            {...getFieldProps("focus")}
            clear
            placeholder="click the button below to focus"
            ref={el => this.inputRef = el}
          ></InputItem>
          <List.Item>
            <div
              style={{ width: "100%", color: "-sharp108ee9", textAlign: "center" }}
              onClick={this.handleClick}
            >
              click to focus
            </div>
          </List.Item>
        </List>

        <List renderHeader={() => "Whether is controlled"}>
          <InputItem
            {...getFieldProps("control")}
            placeholder="controled input"
          ></InputItem>
          <InputItem
            defaultValue="Title"
            placeholder="please input content"
            data-seed="logId"
          ></InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => "Click label to focus input"}>
          <InputItem
            placeholder="click label to focus input"
            ref={el => this.labelFocusInst = el}
          ><div onClick={() => this.labelFocusInst.focus()}></div></InputItem>
        </List>

        <List renderHeader={() => "Show clear"}>
          <InputItem
            {...getFieldProps("inputclear")}
            clear
            placeholder="displayed clear while typing"
          ></InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => "Number of words for title"}>
          <InputItem
            {...getFieldProps("label8")}
            placeholder="limited title length"
            labelNumber={5}
          >5</InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => "Custom titletext / image / empty)"}>
          <InputItem
            {...getFieldProps("input3")}
            placeholder="no label"
          />
          <InputItem
            {...getFieldProps("inputtitle2")}
            placeholder="title can be iconimage or text"
          >
            <div style={{ backgroundImage: "url(https://img.codeshelper.com/upload/img/2022/03/27/xlbcqqpcdkh4395.png)", backgroundSize: "cover", height: "22px", width: "22px" }} />
          </InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => "Customize the extra content in the right"}>
          <InputItem
            {...getFieldProps("preice")}
            placeholder="0.00"
            extra=""
          ></InputItem>
        </List>

        <WhiteSpace />
        <List renderHeader={() => "Format"}>
          <InputItem
            {...getFieldProps("bankCard", {
              initialValue: "8888 8888 8888 8888",
            })}
            type="bankCard"
          ></InputItem>
          <InputItem
            {...getFieldProps("phone")}
            type="phone"
            placeholder="186 1234 1234"
          ></InputItem>
          <InputItem
            {...getFieldProps("password")}
            type="password"
            placeholder="****"
          ></InputItem>
          <InputItem
            {...getFieldProps("number")}
            type="number"
            placeholder="click to show number keyboard"
          ></InputItem>
          <InputItem
            {...getFieldProps("digit")}
            type="digit"
            placeholder="click to show native number keyboard"
          ></InputItem>
        </List>

        <WhiteSpace />

        <List renderHeader={() => "Not editable / Disabled"}>
          <InputItem
            value="not editable"
            editable={false}
          ></InputItem>
          <InputItem
            value="style of disabled `InputItem`"
            disabled
          ></InputItem>
        </List>
      </div>
    );
  }
}

const BasicInputExampleWrapper = createForm()(BasicInputExample);
ReactDOM.render(<BasicInputExampleWrapper />, mountNode);

2, "error verification" example

import { List, InputItem, Toast } from "antd-mobile";

class ErrorInputExample extends React.Component {
  state = {
    hasError: false,
    value: "",
  }
  onErrorClick = () => {
    if (this.state.hasError) {
      Toast.info("Please enter 11 digits");
    }
  }
  onChange = (value) => {
    if (value.replace(/\s/g, "").length < 11) {
      this.setState({
        hasError: true,
      });
    } else {
      this.setState({
        hasError: false,
      });
    }
    this.setState({
      value,
    });
  }
  render() {
    return (
      <div>
        <List renderHeader={() => "Confirm when typing"}>
          <InputItem
            type="phone"
            placeholder="input your phone"
            error={this.state.hasError}
            onErrorClick={this.onErrorClick}
            onChange={this.onChange}
            value={this.state.value}
          ></InputItem>
        </List>
      </div>
    );
  }
}

ReactDOM.render(<ErrorInputExample />, mountNode);

question:
1, "basic" example uses rc-form , "error verification" example does not use rc-form , so what is the usage scenario of rc-form ?
2, how to use getFieldProps (), the code uses {.getFieldProps ("control")} , which means that this function returns an object, so what exactly is in this object?