Блог

Главная - Вопросы по программированию - Новый div не появляется после отправки React

Новый div не появляется после отправки React

#reactjs

#reactjs

Вопрос:

У меня есть форма в react:

 let isSubmitted = false
const {
  register,
  errors,
  handleSubmit
} = useForm < FormInput > ()
const onSubmit = (data: FormInput) => {
  axios
    .post(endpoint, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => {
      isSubmitted = true
    })
    .catch(err => {})
}  
 return (
<div>
  <div>
    <div>
      <form className={classes.root} autoComplete="off">
        <Grid style={formGrid} container>
          <Grid item xs={6}>
            <div style={formItem}>
              <input style={inputStyle} placeholder="Name of Provider" name="provider" type="text" ref={register({ required: true })} />
              <div style={erroStyle}>{errors.Provider amp;amp; 'Provider is required'}</div>
            </div>
            <div style={formItem}>
              <input placeholder="Name of Contact Person" name="contactPerson" ref={register({ required: true })} style={inputStyle} />
              <div style={erroStyle}>{errors.ContactPerson amp;amp; 'Contact person is required'}</div>
            </div>
            <div style={formItem}>
              <input placeholder="Contact Email" name="email" ref={register({ required: true })} style={inputStyle} />
              <div style={erroStyle}>{errors.Email amp;amp; 'Contact email is required'}</div>
            </div>
            <input onClick={handleSubmit(onSubmit)} type="submit" style={submitStyle} />
          </Grid>
          <Grid item xs={6}>
            <div style={formItem}>
              <input placeholder="Address (optional)" required name="address" style={inputStyle} ref={register} />
            </div>
          </Grid>
          {isSubmitted amp;amp;
          <div>Thank you! Form submitted, we'll contact you shortly.</div>}
        </Grid>
      </form>
    </div>
  </div>
</div>
) }

при отправке я хочу показать этот div: {isSubmitted amp;amp; <div>Thank you! Form submitted, we'll contact you shortly.</div>} однако он не появляется. Я новичок в react, и я смотрю с угловой точки зрения, и если бы это было angular, это сработало бы 🙂 чего мне здесь не хватает?

Комментарии:

1. пожалуйста, определите isSubmitted как состояние в компоненте. Например, const [isSubmitted, setIsSubmitted] = useState(false) после отправки формы, вы можете сделать это точно так же. … setIsSubmitted(true) …

Ответ №1:

React повторно отобразит ваш компонент только в том случае, если состояние изменилось, любое обновление переменной не вызовет повторной визуализации.

Предполагая, что вы используете функциональный компонент, вы должны использовать хук useState, чтобы разрешить повторную визуализацию вашего компонента:

 import React, { useState } from 'react';

// --- snip ---

const [isSubmitted, setIsSubmitted] = useState(false);

const {
  register,
  errors,
  handleSubmit
} = useForm < FormInput > ()
const onSubmit = (data: FormInput) => {
  axios
    .post(endpoint, data, {
      headers: {
        'Content-Type': 'application/json'
      }
    })
    .then(res => {
      setIsSubmitted(true)
    })
    .catch(err => {})
}