首页 > 解决方案 > 在必填的输入字段中将星号设为红色(React、Ant Design)

问题描述

我是编程新手,需要您的帮助。目前我正在开发我所谓的宠物项目并面临挑战。我正在使用 ReactJS 和 Ant 设计进行样式设置。所以,问题是我想在所需的输入元素中放一个红色星号作为占位符(希望我说清楚)。我找到了一些变体来使用纯 CSS 解决以下问题,但我想改用 Ant Design 组件。这是我的表单代码:

<div className="form-wrapper">
  <Form {...formItemLayout} form={form} name="register" scrollToFirstError onFinish={onFinish}>
    <Title level={2} className="justify-content-center register-title">
      Registration
    </Title>
    <Form.Item
      className="justify-content-center"
      name="name"
      rules={[
        {
          required: true,
          message: 'Please input your nickname!',
          whitespace: true,
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="Name *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="fullName"
      rules={[
        {
          required: true,
          message: 'Please input your full name!',
          whitespace: true,
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="Surname *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="email"
      rules={[
        {
          type: 'email',
          message: 'The input is not valid E-mail!',
        },
        {
          required: true,
          message: 'Please input your E-mail!',
        },
      ]}
    >
      <Input className="custom-register-input" placeholder="E-mail *" />
    </Form.Item>
    <Form.Item
      className="justify-content-center"
      name="password"
      rules={[
        {
          required: true,
          message: 'Please input your password!',
        },
      ]}
      hasFeedback
    >
      <Input.Password className="custom-register-input" placeholder="Password *" />
    </Form.Item>

而且我不知道如何执行此任务((我将不胜感激您的帮助!

这是输入的想法

标签: reactjsinputantdrequired

解决方案


推荐阅读