即使其他字段已清除，该数字在提交后仍未清除

Question

我有这些字段要在提交后清除。除数字外，此处说明的其他字段确实已清除。为什么会发生这种情况，我该如何解决？任何帮助，将不胜感激。谢谢。

文本字段编号：

const [number, setNumber] = useState("");
const handleNumber = (evt) => {
    const num = evt.target.validity.valid ? evt.target.value : number;

    setNumber(num);
  };

              <TextField
                  type="number"
                  pattern="[0-9]*"
                  variant="outlined"
                  label="Phone Number"
                  fullWidth
                  onChange={handleNumber}
                  required
                  inputProps={{
                    maxLength: 11,
                  }}
                  InputProps={{
                    disableUnderline: true,
                  }}
                />

正在清理状态：

  const clearInfo = () => {
   //other fields here
    setFirstName("");
    setLastName("");
    setNumber("");
  };

投稿：

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
     //codes here
      });
      updateData();
      clearInfo();  
    } catch (err) {
      console.log(err);
    }
    setOpen(true); //for the Alert
  };

更新：我尝试设置 setNumber() 但它仍然无法清除

Answer 1

您的 TextField 目前是 uncontrolled，因为它没有 value 属性。这意味着当您更改 number 时，它对 TextField 没有影响，因为 TextField 的内容不受您的代码控制。要使其受控，请向其添加 value={number}。然后，clearInfo 正常工作：

const { useState } = React;
const { TextField } = MaterialUI;

const Example = () => {
    const [number, setNumber] = useState("");

    const handleNumber = (evt) => {
        const num = evt.target.validity.valid ? evt.target.value : number;
        setNumber(num);
    };

    const clearInfo = () => {
        //other fields here
        // setFirstName("");
        // setLastName("");
        setNumber("");
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        try {
            //codes here
            // updateData();
            clearInfo();  
        } catch (err) {
            console.log(err);
        }
        // setOpen(true); //for the Alert
    };

    return <form onSubmit={handleSubmit}>
        <TextField
            type="number"
            pattern="[0-9]*"
            variant="outlined"
            label="Phone Number"
            fullWidth
            onChange={handleNumber}
            value={number}
            required
            inputProps={{
                maxLength: 11,
            }}
            InputProps={{
                disableunderline: "true", // *** Changed case and value per error from React
            }}
        />
        <button>Submit</button>
    </form>;
};

ReactDOM.render(<Example />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@5.5.0/umd/material-ui.development.js"></script>

我必须在那里进行另外两项更改（除了注释掉缺失的函数等）才能使代码片段正常工作：

我从 handleNumber 中删除了 async 因为它里面没有任何 await 不幸的是 Stack Snippets using JSX 不支持 async/await（因为他们使用的是非常旧的 Babel 版本；请投票修复 here）。
React 在 InputProps 中记录了一个关于 disableUnderline: true 的警告，说（实际上）让它成为 disableunderline: "true"，所以我做到了。

即使其他字段已清除，该数字在提交后仍未清除

The number is not clearing up after submission even if other fields do clear up

javascript

reactjs

material-ui