React中实现所有TextField未填满时禁用提交按钮及非刷新清空TextField的方案

1. 实现提交按钮需所有TextField填满才启用 #

你当前的问题在于用了单个readValue来存储所有输入框的值，但表格是基于props.data动态生成的，每个输入框应该有独立的状态。我们需要改成用对象来存储每个输入框的值，再通过判断所有输入是否都不为空来控制按钮的禁用状态。

修改后的状态与处理函数： #

// 替换原来的单个readValue，用对象存储每个STC对应的输入值
const [formValues, setFormValues] = useState({});
// 根据props.data初始化所有输入为空白，避免初始状态判断问题
useEffect(() => {
  const initialValues = {};
  props.data.forEach(p => {
    initialValues[p.stc] = '';
  });
  setFormValues(initialValues);
}, [props.data]);

// 更新handleChange，根据输入框的name（即p.stc）对应更新值
const handleChange = (event) => {
  const { name, value } = event.target;
  setFormValues(prev => ({
    ...prev,
    [name]: value
  }));
};

// 实时判断是否所有输入都已填写，控制按钮禁用状态
useEffect(() => {
  // 检查所有STC对应的输入值是否都不为空（去除首尾空格）
  const allFilled = props.data.every(p => 
    formValues[p.stc]?.trim() !== ''
  );
  setInputState({ disable: !allFilled });
}, [formValues, props.data]);

修改表格中的TextField： #

确保每个TextField的value对应formValues[p.stc]，兜底避免undefined：

<TextField 
  name={p.stc} 
  type="text" 
  value={formValues[p.stc] || ''}
  onChange={handleChange} 
  required={true} 
  size="small" 
  label="Required" 
  variant="outlined" 
/>

这样一来，只有当所有动态生成的TextField都填入非空白内容时，提交按钮才会解除禁用。

2. 替换window.location.reload实现清空输入并关闭模态框 #

直接刷新页面体验很差，我们只需要重置输入状态+关闭模态框即可，完全不需要刷新页面：

修改后的handleClose函数： #

const handleClose = () => {
  // 重置所有输入值为空白
  const emptyValues = {};
  props.data.forEach(p => {
    emptyValues[p.stc] = '';
  });
  setFormValues(emptyValues);
  // 关闭模态框
  setOpen(false);
};

操作后，模态框关闭时所有输入框会被清空，同时页面不会刷新，体验更流畅。

完整整合后的核心代码片段： #

import { useState, useEffect } from 'react';
// ...其他导入组件

const YourModalComponent = ({ data }) => {
  const [open, setOpen] = useState(false);
  const [formValues, setFormValues] = useState({});
  const [inputState, setInputState] = useState({ disable: true });

  // 初始化输入状态
  useEffect(() => {
    const initialValues = {};
    data.forEach(p => {
      initialValues[p.stc] = '';
    });
    setFormValues(initialValues);
  }, [data]);

  // 监听输入变化，更新按钮状态
  useEffect(() => {
    const allFilled = data.every(p => 
      formValues[p.stc]?.trim() !== ''
    );
    setInputState({ disable: !allFilled });
  }, [formValues, data]);

  const handleOpen = (e) => { 
    setOpen(true); 
  };

  const handleClose = () => {
    // 重置输入
    const emptyValues = {};
    data.forEach(p => {
      emptyValues[p.stc] = '';
    });
    setFormValues(emptyValues);
    setOpen(false);
  };

  const submit = (e) => { 
    console.log("Submitted! Form values:", formValues);
    handleClose(); 
  };

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormValues(prev => ({
      ...prev,
      [name]: value
    }));
  };

  return (
    <div>
      <Table>
        <tbody>
          {data.map((p) => (
            // 为map元素添加key，避免React警告
            <React.Fragment key={p.stc}>
              <tr>
                <th>STC</th>
                <th>Edit Text</th>
              </tr>
              <tr>
                <td><h3>{p.stc}</h3></td>
                <td>
                  <TextField 
                    name={p.stc} 
                    type="text" 
                    value={formValues[p.stc] || ''}
                    onChange={handleChange} 
                    required={true} 
                    size="small" 
                    label="Required" 
                    variant="outlined" 
                  />
                </td>
              </tr>
            </React.Fragment>
          ))}
        </tbody>
      </Table>
      <div>
        <Button 
          disabled={inputState.disable} 
          className="buttonStyle" 
          onClick={submit}
        >
          SUBMIT
        </Button>
        <Button onClick={handleClose}>CANCEL</Button>
      </div>
    </div>
  );
};

小补充：原来的map循环里的空fragment没有加key，React会触发警告，所以改成了带key的<React.Fragment>来解决这个问题。

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