当我调用 onChange 在反应中收集输入字段数据时，需要很长时间才能输入样式化的 M-UI TextFields

Question

所以我的问题是，当我在文本字段中输入内容时，需要大约 2 秒的时间来写入一个字符并将其登录到控制台，我尝试使用 React.memo 和 useCallback 但它失败了：/ 这是我的代码：

const [userData, setUserData] = useState([]);
 const handleDataChange = (e) => {
    const {name, value} = e.target;
    setUserData({
      [name]: value
    })
  }
  console.log(userData);
  <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" onChange={handleDataChange} />
            <TextField variant="filled" type="text" label="Last Name" name="lname" onChange={handleDataChange} />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" onChange={handleDataChange} />
            <TextField variant="filled" type="text" label="Phone number" name="phone" onChange={handleDataChange} />
          </div>

P.S这是我的第一个post，如果我做错了请见谅

Answer 1

好的，所以我找到了一种可以达到相同结果的方法。我将输入包装在一个表单中并将其设置为触发函数 onSubmit 并定位我刚刚使用的字段 e.target.elements.name.value 这是代码：

 const handleDataChange = (e) => {
    e.preventDefault();
    setUserData({
      ["fName"] : e.target.elements.fname.value,
      ["lName"] : e.target.elements.lname.value,
      ["email"] : e.target.elements.email.value,
      ["phone"] : e.target.elements.phone.value,
    })
  }
  
  <form className="user__info" onSubmit={handleDataChange}>
 <div className="user__infoRow">
            <TextField variant="filled" type="text" label="First Name" name="fname" />
            <TextField variant="filled" type="text" label="Last Name" name="lname" />
          </div>
          <div className="user__infoRow">
            <TextField variant="filled" type="email" label="email" name="email" />
            <TextField variant="filled" type="text" label="Phone number" name="phone" />
          </div>
</form>

当我调用 onChange 在反应中收集输入字段数据时，需要很长时间才能输入样式化的 M-UI TextFields

It takes ages to type into the styled M-UI TextFields when I call onChange collecting input field data in react

javascript

reactjs

babeljs

material-ui