【问题标题】：Dispatch clear all my data form input reactjs调度清除我所有的数据表单输入reactjs
【发布时间】：2021-03-30 05:01:23
【问题描述】：

我使用 reactjs。但是当我处理 onClick 事件时。在我单击 Button 并调度一个事件之后。我在 Input 中的所有数据都很清晰。不知道为什么会清除数据，如何防止。

import React, { useEffect } from "react";
import { Input, Form, Checkbox, Button, Row, Col, notification } from "antd";
import { loginRequest } from "../../../store/userStore";
import { useDispatch, useSelector } from "react-redux";
export default function SignInPage() {
  const dispatch = useDispatch()
  const handleSubmit = (e) => {
    dispatch(loginRequest());
  }
  return (
    <>
      <Input>
      </Input>
      <Input>
      </Input>
      <Button onClick={() => {
        handleSubmit()
      }}>Click</Button>

    </>
  )
}

【问题讨论】：

这些输入和按钮是否会在表单元素中呈现？能否提供更全面的代码示例？
这就是我的全部代码。我也使用 react-saga 作为中间件。 @DrewReese
那么这些Form, Checkbox, Button, Row, Col, notification 只是无关的导入吗？您认为您可以创建一个 running 代码框来重现我们可以实时检查和调试的问题吗？

标签： reactjs dispatch

【解决方案1】：

问题

我猜这些输入和按钮正在使用form 元素呈现，并且您并没有阻止默认表单操作的发生。按钮元素默认有一个type="submit"，所以当点击时会调用默认的表单动作并重新加载页面（清除输入）。

解决方案

在事件对象上调用preventDefault。

const handleSubmit = (e) => {
  e.preventDefault(); // <-- prevent the default
  dispatch(loginRequest());
}

【讨论】：

我试过了。但它不能解决我的问题。当我点击按钮时，输入仍然被清除。我认为问题是因为调度动作。但我不知道怎么做。