React 18：点击模态框取消按钮后重置按钮为禁用状态

你的问题核心是关闭模态框时未重置adjust状态，当前组件里的handleClose函数完全没被触发——Dialog的onClose和取消按钮都绑定了父组件传入的props.handleClose，没有执行组件内部的setAdjust("")，导致下次打开模态框时adjust还保留着之前的输入值，按钮无法回到禁用状态。

下面提供两种简洁的修复方案：

方案1：统一内部关闭逻辑，先清状态再关闭 #

修改组件内部的关闭处理函数，先清空输入状态，再调用父组件的关闭方法，同时把Dialog和取消按钮的关闭事件绑定到这个内部函数：

import React, { useState } from "react";
import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  TextField,
} from "@mui/material";

const testDialog = (props) => {
  const [adjust, setAdjust] = useState("");

  // 统一处理关闭：先清空输入状态，再通知父组件关闭模态框
  const handleClose = () => {
    setAdjust("");
    props.handleClose();
  };

  const handleAdjustments = (event) => {
    setAdjust(event.target.value);
  };

  return (
    <div>
      <Dialog
        fullWidth
        open={props.boxOpen}
        onClose={handleClose} // 绑定内部关闭函数
      >
        <DialogTitle>Test</DialogTitle>
        <DialogContent>
          <div>
            <TextField
              sx={{
                label: { fontSize: 13 },
                input: { paddingTop: 1, paddingBottom: 2 },
              }}
              size="medium"
              fullWidth
              required
              id="countProducts"
              label="Count of products"
              variant="outlined"
              value={adjust} // 绑定value，确保输入框和状态同步
              onChange={handleAdjustments}
            />
          </div>
        </DialogContent>
        <div>
          <Button onClick={handleClose}>CANCEL</Button> // 绑定内部关闭函数
          <Button disabled={!adjust}>ADJUST</Button>
        </div>
      </Dialog>
    </div>
  );
};
export default testDialog;

关键改动说明：

• 移除了组件内部冗余的open状态（模态框显示由父组件props.boxOpen控制）
• 将Dialog和取消按钮的关闭事件都绑定到内部handleClose，保证关闭时必清空adjust
• 给TextField添加value={adjust}，确保输入框内容随状态同步清空

方案2：用useEffect监听模态框显示状态 #

如果不想修改原有关闭事件的绑定逻辑，可以通过useEffect监听props.boxOpen的变化，当模态框从打开切换为关闭时自动重置状态：

import React, { useState, useEffect } from "react";
import {
  Button,
  Dialog,
  DialogContent,
  DialogTitle,
  TextField,
} from "@mui/material";

const testDialog = (props) => {
  const [adjust, setAdjust] = useState("");

  useEffect(() => {
    // 模态框关闭时，自动清空输入状态
    if (!props.boxOpen) {
      setAdjust("");
    }
  }, [props.boxOpen]);

  const handleAdjustments = (event) => {
    setAdjust(event.target.value);
  };

  return (
    <div>
      <Dialog
        fullWidth
        open={props.boxOpen}
        onClose={props.handleClose}
      >
        <DialogTitle>Test</DialogTitle>
        <DialogContent>
          <div>
            <TextField
              sx={{
                label: { fontSize: 13 },
                input: { paddingTop: 1, paddingBottom: 2 },
              }}
              size="medium"
              fullWidth
              required
              id="countProducts"
              label="Count of products"
              variant="outlined"
              value={adjust}
              onChange={handleAdjustments}
            />
          </div>
        </DialogContent>
        <div>
          <Button onClick={props.handleClose}>CANCEL</Button>
          <Button disabled={!adjust}>ADJUST</Button>
        </div>
      </Dialog>
    </div>
  );
};
export default testDialog;

这种方案更被动，适合需要保留原有父组件关闭逻辑的场景，只要模态框关闭，状态就会自动重置。

两种方案都能实现你的需求：每次打开模态框时ADJUST按钮默认禁用，输入文本后启用，关闭模态框后按钮恢复禁用状态。

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