在 React 中使用带有钩子的基本状态 [重复]答案

【问题标题】：Using base state with hooks in React [duplicate]在 React 中使用带有钩子的基本状态 [重复]
【发布时间】：2020-06-09 22:07:14
【问题描述】：

参考在 React 组件中使用 baseState 重置表单。

我在返回表单的 React 组件中使用 Hooks（useState 等）。在我们使用 Hooks 的时候，有什么方法可以使用this.baseState 来重置输入值吗？

附言。
请检查下面的代码 sn-p。我想在用户单击“取消”按钮时重置表单（设置基本状态）。

代码：

import React, { useState } from 'react';
import { render } from 'react-dom';
import PropTypes from 'prop-types';

const TasksTemplateEditForm = ({
  handleFormResetOnCancel,
  handleFormSubmit
}) => {
  const [name, setName] = useState("default value");
  const [description, setDescription] = useState("default value");
  const [is_general, setIsGeneral] = useState("default value");

  return (
    <form>
      <div>
        <label>Template Name</label>
        <input
          type="text"
          name="name"
          onChange={e => setName(e.target.value)}
          value={name}
        />
      </div>
      <div className="form-group">
        <label>Description</label>
        <textarea
          name="description"
          onChange={e => setDescription(e.target.value)}
          value={description}
        ></textarea>
      </div>

      <button onClick={() => handleFormResetOnCancel()} >CANCEL</button>

      <button onClick={() => handleFormSubmit()} >UPDATE CHANGES</button>
    </form>
  );
};

【问题讨论】：

将状态设置回baseState?如果您尝试过，您能否分享一个实际的组件代码 sn-p，说明什么不起作用？
您在使用任何表单库吗？如果不是，那么只需将初始值存储在某个对象中，当您 useState 时将其传递，并在您重置时再次传递它
@DrewReese 感谢您的评论。我已经用我的代码更新了这个问题。 @Jayce444 我可以简单地扩展 React.Component 类而不是使用功能组件。然后我可以在里面使用baseState。你的建议不是一个好的做法。谢谢。
您不使用任何该组件状态。如果您在（即name="test name"）中传递一个道具值，那么您的表单输入不允许它更改。您想在这里实现什么目标？
handleFormResetOnCancel 和 handleFormSubmit 是做什么的？如果您的按钮是语义表单按钮（即type="submit" 和type="reset"）怎么办？将baseState 作为道具传递并初始化表单字段？

标签： javascript reactjs

【解决方案1】：

根据我从您的代码中了解到的情况，您的基本状态是作为道具（可能是父组件的状态）。您可以编写一个 resetForm 函数并像这样在取消单击时调用它。

const TasksTemplateEditForm = ({
  name,
  description,
  is_general,
  toggleTitleEditable,
  handleSubmit
}) => {
  const [_name, setName] = useState(name);
  const [_description, setDescription] = useState(description);
  const [_is_general, setIsGeneral] = useState(is_general);
  const resetForm = () => {
    setName(name);
    setDescription(description);
    setIsGeneral(is_general); 
  }

【讨论】：