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