Блог

Я некоторое время возился с semantic-ui и наткнулся на этот раздел ошибок в документации. Код выглядит так:

   <Form.Input
    error={{ content: 'Please enter your first name', pointing: 'below' }}
    fluid
    label='First name'
    placeholder='First name'
    id='form-input-first-name'
  />
 

В результате возникает состояние ошибки, при котором поле ввода становится красным и появляется сообщение. Но в документации не совсем показано, как реализовать это поведение, если вы просто поместите эту опору для ошибок внутри компонента, она просто останется постоянно красной.

В настоящее время я использую форму react-hook для проверки и отображения ошибок. Мои поля ввода выглядят следующим образом:

         <Form.Field>
            <Form.Input
                label="Name"
                placeholder="Enter the cat's name" type="text"
                {...register("name", { required: true, minLength: 2, maxLength: 30 })}
            />
            <p>
                {errors.name?.type === "required" amp;amp; "You need to write the cat's name"}
            </p>
        </Form.Field>
 

Было бы очень приятно отобразить такое поведение (все красные с сообщениями об ошибках, когда пользователь пытается отправить сообщение с пустым полем), но я просто не могу понять, как это сделать. Есть какие-нибудь предложения?