React之使用antdForm表单

一、问题介绍

在使用from表单时，当我们设置他的规则relus时，会发现，表单的label左边会出现一个*号
代码如下：

import React, { FC, useCallback } from 'react'
import { Form, Input, Checkbox, Button } from 'antd'
import styles from './login.module.scss'
interface Props {}

const Login: FC<Props> = (): JSX.Element => {
  const handleOnFinish = useCallback((value: any) => {
    console.log(value)
  }, [])
  return (
    <div className={styles['login-div']}>
      <h1>用户登录</h1>
      <Form
        className={styles['login-div__form']}
        onFinish={handleOnFinish}
        layout="inline"
      >
        <Form.Item
          label="邮箱"
          name="username"
          rules={[{ required: true, message: 'Please input your username!' }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="密码"
          name="password"
          rules={[{ required: true, message: 'Please input your password!' }]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item name="remember" valuePropName="checked">
          <Checkbox>Remember me</Checkbox>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit">
            登录
          </Button>
        </Form.Item>
      </Form>
      <div className={styles['message']}>
        <p>
          没有账号? <a href="/register">点击创建</a>.
        </p>
      </div>
    </div>
  )
}

export default Login

展示如下：
label左边有一个*号

二、如何去掉*号

1. 直接修改rules

<Form.Item
  label="邮箱"
  name="username"
  rules={[{ required: false, message: 'Please input your username!' }]}
>
  <Input />
</Form.Item>

结果如下：
可以看到邮箱字段已经没有 *号

但是这样会影响表单的校验规则，当输入为空，且提交会发现没有对输入进行校验

2. 不影响校验规则的情况下，去掉*号
使用reauire
代码如下

 <Form.Item
 label="邮箱"
  name="username"
  required={false}  //使*号不展示
  rules={[{ required: true, message: 'Please input your username!' }]}
>
  <Input />
</Form.Item>