У меня есть контактная форма, в которой я хочу предотвратить отправку, если в любой из следующих форм нет записи: имя, адрес электронной почты и / или сообщение. Однако форма продолжает активироваться при текущем синтаксисе, даже если одна из ссылок остается пустой. Не можете определить почему?

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
Korslin 11 Ноя 2018 в 19:06

1 ответ

Лучший ответ

При использовании тернарного оператора вы получаете только один оператор для каждой стороны блока if-else. Ваш вызов axios будет происходить независимо от того, если, потому что другая сторона тернара - это ваш вызов 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).

1
Tyler 11 Ноя 2018 в 21:35