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

时间:2018-11-11 16:06:01

标签: reactjs if-statement jsx

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

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
     }
   })};

1 个答案:

答案 0 :(得分: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的重要功能)。