处理异步回调和渲染的更好方法 DOM

Question

我目前正在使用 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和表格的清除。如何在 (form.status === 200) 上操作 DOM 即清除表单并显示成功消息？

我所做的是最肮脏的方式，而且是一种 hack。 ReactJS 专家会怎么做？

Answer 1

虽然人们已经在正确的方向上发表评论，但我想说明一下 "what it means"，假设您是 ReactJS 的新手。

第 1 步 - 为表单中的输入值声明状态变量。

第 2 步 - 声明一个状态变量来控制“#success”元素的可见性。

例如：state = { showSuccess: false, fullname: "", email:"", companyName:"", phoneNumber:"", message:"" }

第 3 步 - 描述正确的渲染，包括使用状态变量设置的输入值。此外，如果状态变量具有 'truthful' 值，则“#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:""})
    }

处理异步回调和渲染的更好方法 DOM

A better way to handle async callbacks and rendering DOM

javascript

async-await

nodemailer

reactjs