Question

我有一份联系表，如果以下任何形式的输入中没有条目，我希望阻止提交：姓名，电子邮件和/或消息。但是，即使在其中一个引用变为空白的情况下，该表单仍会在当前语法下继续触发。无法确定原因？

submit = (event) => {
event.preventDefault();
    (this.refs.name.value  === "" || this.refs.email.value === "" || 
    this.refs.message.value === "")  
?
    alert("Sorry.  Message not submitted.  Form requires Name, Email, 
    & Message.")
:
    this.setState({
    modalIsOpen: true,
    }) 
    axios({
     method: "POST", 
     url:"/submit", 
     data: {
      name: this.refs.name.value,   
      email: this.refs.email.value,  
      message: this.refs.message.value
     }
   })};

Answer 1

使用三元运算符时，if-else块的每一侧只获得一个语句。无论是否，您的axios调用都将发生，因为三元组的else端是您的this.setState调用。 axios调用是JavaScript中的单独语句，因此不属于三元组。在这种情况下，JavaScript对分号的放松可能会叮咬您，而短绒棉可以成为您最好的朋友。

submit = (event) => {
  event.preventDefault();
  if (this.refs.name.value === "" || this.refs.email.value === "" || this.refs.message.value === "") {
    alert("Sorry.  Message not submitted.  Form requires Name, Email, & Message.")
  } else {
    this.setState({ modalIsOpen: true });
    axis.get({
      method: "POST", 
      url: "/submit", 
      data: {
        name: this.refs.name.value,   
        email: this.refs.email.value,  
        message: this.refs.message.value
      }
    });
  }
  // <- Your axios call was going here instead. That is why it always submitted
};

此外，正如Mayhem在评论中提到的那样，最好将状态名称，电子邮件和消息的值存储在状态中，并通过onChange事件对其进行更新。这样，您可以从状态中获取值。这样做还有其他好处，包括您的渲染始终与状态保持同步（确定性渲染是React的重要功能）。

为什么我的React / JSX if语句仍在执行？

1 个答案: