antd form表单自定义组件及原理

演示版本

“antd”: “^5.6.0”
“react”: “^18.2.0”
“typescript”: “^5.0.2”

代码

import React from "react";
import { Button, Card, Form } from "antd";
import { Input } from "antd";
const CustomInput = (props: any) => {
  return (
    <div>
      <Input
        value={props.value}
        onChange={(e) => {
          props.onChange("#" + e.target.value.replaceAll("#", "") + "#");
        }}
      ></Input>
      <Input />
    </div>
  );
};

const App: React.FC = () => {
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    console.log("Form values:", values);
  };
  return (
    <Card>
      <Form form={form} onFinish={onFinish}>
        <Form.Item
          name="test"
          label="两个输入框"
          rules={[{ required: true, message: "Please input your test!" }]}
        >
          <CustomInput placeholder="Enter your email" />
        </Form.Item>
        <Form.Item>
          <Button htmlType="submit">提交</Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
export default App;

解释

Form.Item会透传一些参数给子组件，具体请打印子组件props，其中value和onChange两个参数请关注，调用props.onChange可改变props.value，然后Form取拿值取的就是props.value，原理就这么简单。具体细节自行问AI

该案例中实现的效果是，对第一个输入框进行效验，且输入框内容前后永远带着’#’