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

如果在提交时调用了函数或方法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>
  )
}

Answer 2

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

为什么e.preventDefault（）使页面在提交时刷新？

2 个答案: