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

Question

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

是什么原因造成的，为什么没有e.preventDefault()，我的页面在提交时没有刷新？

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

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 中会。

Answer 1

页面不会刷新，因为您的 fetch() 块正在进行异步 (Ajax) 调用。异步调用不会导致页面刷新。如果希望异步调用完成后页面刷新，在 then() 块中添加 window.location.reload()。

Answer 2

如果您的函数或方法searchJokes 在提交时被调用，那么第一个参数就是您的事件。这适用于按钮和表单事件。

searchJokes(e) {
  e.preventDefault();
  // rest of onSubmit code
}

因此，在您的情况下，如果从按钮单击或表单 onSubmit 事件调用 searchJoke 事件，那么这样的事情可能会有所帮助

function searchJokes(ev, limit = 15) {
  ev.preventDefault();
  // ...
}

// event is passed to searchJokes as first argument, limit should be the second argument because it has a default value.
<button onClick={ev => searchJokes(ev, 30)}>Search Jokes</button>

简单形式示例：

function MyForm() {
  function onFormSubmit(ev) {
    ev.preventDefault();
    const { name } = ev.currentTarget;
    console.log(name.value);
  }

  return (
    <form onSubmit={onFormSubmit}>
      <label htmlFor="name">Name</label>
      <input id="name" name="name" />
      <button type="submit">Submit form</button>
    </form>
  )
}