如何在文本字段中填写所有字段之前禁用按钮

Question

我在模态中有一个 table，其代码如下所示。

  <div>
        <Table>
              <tbody>
                {props.data.map((p) => <>
                  <tr>
                    <th> STC </th>
                    <th> Edit Text</th>
                  </tr>
                  <tr index={p}>
                  <td key={p.stc}><h3>{p.stc}</h3></td>
                  <td >
                    <TextField name={p.stc} type="text"  value={p.readValue}  onChange={handleChange} required={true} size="small" label="Required" variant="outlined" />
                  </td>
                  </tr>
                </>)}
                </tbody>
        </Table>
        <div >
          <Button disabled={inputState.disable} className="buttonStyle" onClick={(e) => submit()}>SUBMIT</Button>
          <Button onClick={handleClose}>CANCEL</Button>
          </div>
      </div>

它们对应的函数和声明如下-

  const [formInput, setFormInput] = useReducer(
    (state, newState) => ({ ...state, ...newState }),
  );
  const [inputState, setInputState] = useState({disable: true});
  const handleOpen = (e) => {
    setOpen(true);
  };

  const handleClose = () => {
    window.location.reload(false);
    setOpen(false);
  };
  const [readValue, writeValue] = useState("");

  const submit = (e) => {
    console.log("Submitted!")
    handleClose();
  }

  const handleChange = (event) => {
    const newValue = event.target.value;
    writeValue(event.target.value)
    setInputState({disable: event.target.value===''}) 
  }

我要-

禁用按钮，直到并且除非所有文本字段都已填充。
在 handleClose() 中，是否有替代解决方案来代替 window.reload 来清除 TextFields 的值？

格式看起来像我在下面附上的图片- enter image description here

Answer 1

import React, { useState } from "react";
import "./style.css";

export default function App() {
  const textFields = ["field1", "field2"];
  const [inputValue, setInputValue] = useState({});
  const [buttonDisabled, setButtonDisabled] = useState(true);

  const validateButton = accInputs => {
    let disabled = false;
    textFields.forEach(field => {
      if (!accInputs[field]) {
        disabled = true;
      }
    });
    return disabled;
  };
  const handleChange = ({ currentTarget }) => {
    const { name, value } = currentTarget;
    const inputObj = {};
    inputObj[name] = value;
    const accInputs = { ...inputValue, ...inputObj };
    setInputValue(accInputs);
    setButtonDisabled(validateButton(accInputs));
  };

  const handleSubmit = () => {
    console.log("submit clicked");
  };

  const handleCancel = () => {
    const inputObj = {};
    textFields.forEach(field => {
      inputObj[field] = "";
    });
    setInputValue(inputObj);
  };
  return (
    <div>
      <table border="1px">
        <tr>
          <th> STC </th>
          <th> Edit Text</th>
        </tr>
        {textFields.map(field => {
          console.log("rendered");
          return (
            <tr>
              <td>
                <h3>p.stc</h3>
              </td>
              <td>
                <input
                  placeholder="required *"
                  value={inputValue[field]}
                  name={field}
                  onChange={handleChange}
                />
              </td>
            </tr>
          );
        })}
      </table>
      <input type="submit" disabled={buttonDisabled} onClick={handleSubmit} />
      <input type="submit" onClick={handleCancel} value="cancel" />
    </div>
  );
}

用上面的代码就可以轻松实现。 Please refer working example here

已更新以添加第二点。

如何在文本字段中填写所有字段之前禁用按钮

How to disable a button until all the fields are filled in a textfield

html

frontend

html-table

reactjs

react-hooks