React-Antd-表单-必选样式

文档地址: 链接.

import React, { useState } from "react";
import { Form, Input, Button, Radio } from "antd";
import { InfoCircleOutlined } from "@ant-design/icons";

function App() {
  const [form] = Form.useForm();
  const [requiredMark, setRequiredMarkType] = useState("optional");

  return (
    <Form
      form={form}
      layout="vertical"
      onFinish={(values)=>{
        console.log(values);
      }}
      onFinishFailed={(errInfo)=>{
        console.log(errInfo);
      }}
      // 表单默认值，只有初始化以及重置时生效
      initialValues={{ requiredMarkValue: requiredMark }}
      // 字段值更新时触发回调事件 function(changedValues, allValues)
      onValuesChange={(props) => {
        setRequiredMarkType(props.requiredMarkValue);
      }}
      // 必选样式，可以切换为必选或者可选展示样式
      requiredMark={requiredMark}
    >
      <Form.Item label="需要标记" name="requiredMarkValue">
        <Radio.Group>
          <Radio.Button value="optional">可选择的</Radio.Button>
          <Radio.Button value={true}>必须的</Radio.Button>
          <Radio.Button value={false}>隐藏</Radio.Button>
        </Radio.Group>
      </Form.Item>
      <Form.Item
        label="区域A"
        name="areaA"
        rules={[
          {
            required:true,
            message:'区域A必填.'
          }
        ]}
        // 配置提示信息
        tooltip="这是一个必填的区域"
      >
        <Input placeholder='请输入区域A的值' />
      </Form.Item>
      <Form.Item
        label='区域B'
        name="areaB"
        // 配置提示信息
        tooltip={{
          title:'带有自定义图标的工具提示',
          icon:<InfoCircleOutlined />
        }}
      >
        <Input placeholder='请输入区域B的值' />
      </Form.Item>
      <Form.Item>
        <Button type="primary" htmlType="submit">Submit</Button>
      </Form.Item>
    </Form>
  );
}
export default App;