React中关闭React Spectrum Dialog时如何重置内部状态？

我使用React Spectrum的Dialog组件，关闭对话框后重新打开时，输入框的内容不会恢复为初始状态。请问如何在关闭Dialog时重置其内部的所有状态？

原代码：

import {
  ActionButton,
  Button,
  ButtonGroup,
  Content,
  Dialog,
  DialogTrigger,
  Divider,
  Header,
  Heading,
  Text,
  TextField,
} from "@adobe/react-spectrum";
import { useState } from "react";

export const DialogBox = () => {
  const [value, setValue] = useState("");
  return (
    <DialogTrigger>
      <ActionButton>Check connectivity</ActionButton>
      {(close) => (
        <Dialog>
          <Heading>Internet Speed Test</Heading>
          <Header>Connection status: Connected</Header>
          <Divider />
          <Content>
            <TextField value={value} onChange={setValue} />
          </Content>
          <ButtonGroup>
            <Button variant="secondary" onPress={close}>
              Cancel
            </Button>
            <Button variant="cta" onPress={close}>
              Confirm
            </Button>
          </ButtonGroup>
        </Dialog>
      )}
    </DialogTrigger>
  );
};

这里有几种可行的方法来解决这个问题：

方法1：包装close函数，关闭时重置状态 #

直接在调用close的同时重置输入框的值，修改按钮的onPress事件，确保关闭对话框时同步清空状态：

import {
  ActionButton,
  Button,
  ButtonGroup,
  Content,
  Dialog,
  DialogTrigger,
  Divider,
  Header,
  Heading,
  Text,
  TextField,
} from "@adobe/react-spectrum";
import { useState } from "react";

export const DialogBox = () => {
  const [value, setValue] = useState("");
  
  const handleClose = (close) => {
    setValue("");
    close();
  };

  return (
    <DialogTrigger>
      <ActionButton>Check connectivity</ActionButton>
      {(close) => (
        <Dialog>
          <Heading>Internet Speed Test</Heading>
          <Header>Connection status: Connected</Header>
          <Divider />
          <Content>
            <TextField value={value} onChange={setValue} />
          </Content>
          <ButtonGroup>
            <Button variant="secondary" onPress={() => handleClose(close)}>
              Cancel
            </Button>
            <Button variant="cta" onPress={() => handleClose(close)}>
              Confirm
            </Button>
          </ButtonGroup>
        </Dialog>
      )}
    </DialogTrigger>
  );
};

方法2：利用DialogTrigger的onOpenChange回调 #

通过DialogTrigger的onOpenChange属性监听对话框的显示状态，当对话框从打开变为关闭时自动重置状态：

import {
  ActionButton,
  Button,
  ButtonGroup,
  Content,
  Dialog,
  DialogTrigger,
  Divider,
  Header,
  Heading,
  Text,
  TextField,
} from "@adobe/react-spectrum";
import { useState } from "react";

export const DialogBox = () => {
  const [value, setValue] = useState("");

  return (
    <DialogTrigger 
      onOpenChange={(open) => {
        if (!open) {
          setValue("");
        }
      }}
    >
      <ActionButton>Check connectivity</ActionButton>
      {(close) => (
        <Dialog>
          <Heading>Internet Speed Test</Heading>
          <Header>Connection status: Connected</Header>
          <Divider />
          <Content>
            <TextField value={value} onChange={setValue} />
          </Content>
          <ButtonGroup>
            <Button variant="secondary" onPress={close}>
              Cancel
            </Button>
            <Button variant="cta" onPress={close}>
              Confirm
            </Button>
          </ButtonGroup>
        </Dialog>
      )}
    </DialogTrigger>
  );
};

方法3：拆分Dialog内容为独立组件（自动重置） #

将Dialog内部的内容提取成单独的组件，这样每次打开Dialog时，组件会重新挂载，内部状态会自动回到初始值，无需手动重置：

import {
  ActionButton,
  Button,
  ButtonGroup,
  Content,
  Dialog,
  DialogTrigger,
  Divider,
  Header,
  Heading,
  Text,
  TextField,
} from "@adobe/react-spectrum";
import { useState } from "react";

const DialogContent = ({ close }) => {
  const [value, setValue] = useState("");
  
  return (
    <Dialog>
      <Heading>Internet Speed Test</Heading>
      <Header>Connection status: Connected</Header>
      <Divider />
      <Content>
        <TextField value={value} onChange={setValue} />
      </Content>
      <ButtonGroup>
        <Button variant="secondary" onPress={close}>
          Cancel
        </Button>
        <Button variant="cta" onPress={close}>
          Confirm
        </Button>
      </ButtonGroup>
    </Dialog>
  );
};

export const DialogBox = () => {
  return (
    <DialogTrigger>
      <ActionButton>Check connectivity</ActionButton>
      {(close) => <DialogContent close={close} />}
    </DialogTrigger>
  );
};

内容的提问来源于stack exchange，提问作者Freddy.