即使其他字段都清空了，提交后号码也没有清空

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

目前是 不受控制，因为它没有

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/[email protected]/umd/material-ui.development.js"></script>

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

1. 我从

   async

   中删除了

   handleNumber

   ，因为它里面没有任何

   await

   。 （当我第一次回答这个问题时，使用 JSX 的 Stack Snippets 不支持

   async

   /

   await

   ，因为他们使用了非常旧的 Babel 版本；现在已经修复了）。

2. React 在

   disableUnderline: true

   中记录了有关

   InputProps

   的警告，说（实际上）要使其成为

   disableunderline: "true"

   ，所以我就这么做了。