为什么e.preventDefault()会在提交时刷新页面?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了为什么e.preventDefault()会在提交时刷新页面?相关的知识,希望对你有一定的参考价值。

我有一个搜索处理程序方法,当单击一个按钮时,它执行搜索(从API获取)。我没有像教程中所建议的那样添加e.preventDefault()来阻止页面提交,但是在执行搜索时似乎没有刷新页面。为了确保它没有被刷新,我将e.preventDefault()添加到搜索方法中,它实际上导致页面刷新而不显示结果 - 与预期相反。

造成这种情况的原因是什么,为什么没有e.preventDefault()我的页面没有提交?

这是我添加了e.preventDefault();的搜索方法。它在构造函数中绑定,并作为prop传递给搜索按钮(在另一个文件中)。

searchJokes(limit = 15, e) {
    e.preventDefault();
    // If nothing entered, user gets "Please fill out this field" message due to "required" attribute on input element
    if (this.state.searchTerm !== '') {
      this.setState({
        isFetchingJokes: true,
        isSearch: true
      });

      fetch(
        `https://icanhazdadjoke.com/search?term=${
          this.state.searchTerm
        }&limit=${limit}`,
        {
          method: 'GET',
          headers: {
            Accept: 'application/json'
          }
      })
        .then(response => response.json())
        .then(json => {
          let jokes = json.results;
          this.setState({
            jokes,
            isFetchingJokes: false
          });
        });
    }
  }

包含表单元素的功能组件(只有搜索按钮才会调用搜索方法):

const RetrievalForm = props => (
  <form>
    <input
      type="text"
      placeholder="Enter search term..."
      onChange={props.onSearchInputChange}
      required
    />
    <button onClick={props.onSearch} disabled={props.isSearching}>Search</button>
    <button onClick={props.onRandomize} disabled={props.isSearching}>
      Randomize
    </button>
  </form>
);

没有使用e.preventDefault();的完整代码:app.js retrieval-form.js

编辑:在教程中使用onSubmit而不是onClick。不知何故onClick实际上不会导致页面刷新,而onSubmit确实如此。所以我没有必要使用e.preventDefault()

编辑2:onClick搜索不会导致Chrome中的页面刷新,但它在Firefox中会发生。

以上是关于为什么e.preventDefault()会在提交时刷新页面?的主要内容,如果未能解决你的问题,请参考以下文章

调用 e.preventDefault() 后提交表单

e.preventDefault() 方法到底做了啥? [复制]

jQuery - e.preventDefault 难题/阻止默认后无法提交表单

引导验证(成功)后,表单使用默认方法而不是 ajax 提交。 e.preventDefault() 不起作用?

10 动态属性:[name]动态方法@[event]禁止默认提交e.preventDefault()

JavaScript e.preventDefault();形式上不起作用