Лучший способ обработки асинхронных обратных вызовов и рендеринга DOM - PullRequest
Новая
       19

Лучший способ обработки асинхронных обратных вызовов и рендеринга DOM

0 голосов
/ 07 октября 2018

В настоящее время я использую nodemailer для отправки электронной почты с reactjs, и мой код следующий: 

  constructor(props) {
    super(props);
    this.state = {
      fullname: "",
      email: "",
      companyName: "",
      phoneNumber: "",
      message: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }


  async handleSubmit(e) {
    e.preventDefault();
    let { fullname, email, companyName, phoneNumber, message } = this.state;
    let form = await axios.post("/api/form", {
      fullname,
      email,
      companyName,
      phoneNumber,
      message
    });
    /**
     * I'm not proud of using jQuery in reactjs
     * Will need to get a better way to do this
     */

    if (form.status === 200) {
      $("#success").show();
      $("[name='fullname']").val("");
      $("[name='email']").val("");
      $("[name='companyName']").val("");
      $("[name='phoneNumber']").val("");
      $("[name='message']").val("");
  // As per comments and HS' answer
  this.setState({
    fullname: "",
    email: "",
    companyName: "",
    phoneNumber: "",
    message: ""
  })
    }
  }

Теперь проблема в jQuery и очистке формы.Как я могу манипулировать DOM на (form.status === 200), т. Е. Очистить форму и показать сообщение об успехе?

То, что я сделал, - самый грязный из возможных способов, и это хак.Как бы это сделал эксперт ReactJS?

1 Ответ

0 голосов
/ 07 октября 2018

Хотя люди уже прокомментировали правильное направление, я хотел бы проиллюстрировать «что это значит», предполагая, что вы новичок в ReactJS.

Шаг 1 - объявите переменные состояния для входных значений вform.

Шаг 2 - объявить переменную состояния для управления видимостью элемента "#success".

Пример: state = { showSuccess: false, fullname: "", email:"", companyName:"", phoneNumber:"", message:"" }

Шаг 3 - Опишите правильноерендеринг, включая значение входных данных, устанавливаемых с помощью переменных состояния.Кроме того, элемент «#success» должен быть видимым только в том случае, если переменная состояния имеет «истинное» значение.

Пример: this.state.showSuccess && <div id='success'>Success</div>, <input type="text" value={this.state.email} onChange={(e)=>this.setState({email:e.target.value})}/>

Шаг 4 - ОпределитеВызвать API и правильно обновить состояние.

Пример: из приведенного выше примера - 

if (form.status === 200) {
      this.setState({showSuccess: true, fullname: "", email:"", companyName:"", phoneNumber:"", message:""})
    }
...