什么是React中的preventDefault()

React使用合成事件来处理来自按钮、输入和表单元素的事件。合成事件是一个围绕本地DOM事件的外壳，为React提供额外信息。有时你必须在你的应用程序中使用event.preventDefault(); 。

import React from 'react';

const INITIAL_LIST = [
  'Learn React',
  'Learn Firebase',
  'Learn GraphQL',
];

const ListWithAddItem = () => {
  const [value, setValue] = React.useState('');
  const [list, setList] = React.useState(INITIAL_LIST);

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  const handleSubmit = (event) => {
    if (value) {
      setList(list.concat(value));
    }

    setValue('');

    event.preventDefault();
  };

  return (
    <div>
      <ul>
        {list.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>

      <form onSubmit={handleSubmit}>
        <input type="text" value={value} onChange={handleChange} />
        <button type="submit">Add Item</button>
      </form>
    </div>
  );
};

export default ListWithAddItem;

列表组件的例子取自这个关于React状态管理的教程，它使用了React钩子。它演示了如何通过使用带有输入和按钮元素的表单元素向列表中添加一个项目。在这种情况下，当提交表单时，一个preventDefault被调用，以防止浏览器重新加载/刷新。你可以自己尝试使用和不使用 "防止默认 "的代码。

为什么表单提交后会重新加载浏览器所有的本地HTML元素都有其内部的本地行为。例如，输入元素存储其内部状态。这就是为什么React经常被用来接管有控制的组件，通过React来管理状态。这同样适用于一个表单元素，它有一个提交事件，通过一个提交按钮元素调用。在过去，人们希望通过刷新浏览器来刷新所有状态，并将数据提交给后台。如今，像React这样的库，给了我们更多的灵活性来处理提交事件。在这种情况下，我们通过更新我们组件状态中的列表来处理它。

在另一种情况下，你可以从后端获取数据并将其存储在组件的状态中。现在已经没有人期待从表单中提交数据了，这就是为什么开发人员能够接管。开发者不需要担心浏览器的任何不受欢迎的行为。