reactjs - React 表单在输入更改时冻结

Question

我在 ReactJS 中有以下表格

  <input
    placeholder="Enter Phone Number"
    name="phone"
    type="tel"
    value={phone}
    required
    className={`${classes.formField} ${classes.eightyPercent}`}
  />
  <label for="password" className={classes.formLabel}>
    Password*
  </label>
  <input
    placeholder="Enter Password"
    name="password"
    type="password"
    required
    value={password}
    className={`${classes.formField} ${classes.eightyPercent}`}
  />

每当我将onChange包含在电话号码字段中时，如下所示。在我开始输入电话号码或密码字段的那一刻，UI 冻结

  <input
    placeholder="Enter Phone Number"
    name="phone"
    type="tel"
    value={phone}
    required
    onChange={(evt) => {
      setPhone(evt.target.value); //This freezes the UI
    }}
    className={`${classes.formField} ${classes.eightyPercent}`}
  />

我该如何解决这个问题？

标签： reactjs