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，即清除表单并显示成功消息？

我所做的是最肮脏的方式，而且是骇客。 ReactJS专家将如何做？

Answer 1

尽管人们已经在正确的方向上发表了评论，但我想举例说明“这意味着什么”，假设您是ReactJS的新手。

步骤1-以表格形式声明输入值的状态变量。

第2步-声明状态变量以控制“＃成功”元素的可见性。

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

第3步-描述适当的渲染，包括使用状态变量设置的输入值。另外，只有状态变量具有“真”值时，“＃成功”元素才应该可见。

例如：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的更好方法

1 个答案: