当我通过数字输入更新状态中的数字值时，我在一些检查中遇到了一些问题。
我正在React Three Fiber中使用3Dconfigurator，希望通过侧面板使我的房间大小可变。全局状态在zustand存储中更新，这很好，但我一直无法对我的值进行检查。我只能让它们在更改时运行，这使我无法正确更新数字。

**如何在离开输入字段后才更新状态并运行检查？**我已经研究了onSubmit和onBlur，但它们似乎不起作用...

提前感谢大家！

import { useAppStore } from "@/stores/appStore";

const Roomdimensions = () => {
  const update = useAppStore((state) => state.update);
  const room = useAppStore((state) => state.room);

  const changeRoom = () => {
    let roomwidth = document.querySelector("#width").value;
    let roomheight = document.querySelector("#height").value;
    let roomdepth = document.querySelector("#depth").value;

    if (roomwidth < 100 || roomwidth > 1200) {
      update({
        room: { width: 300, height: roomheight, depth: roomdepth },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room width must be between 100cm and 1200cm",
      });
    }
    if (roomdepth < 100 || roomdepth > 1200) {
      roomdepth = 300;
      update({
        room: { width: roomwidth, height: roomheight, depth: 300 },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room depth must be between 100cm and 1200cm",
      });
    }

    if (roomheight < 180 || roomheight > 300) {
      roomheight = 210;
      update({
        room: { width: roomwidth, height: 210, depth: roomdepth },
        showAlert: true,
        alertAction: "notification",
        alertMessage: "Room height must be between 180cm and 300cm",
      });
    }

    const room = {
      width: roomwidth,
      height: roomheight,
      depth: roomdepth,
    };
    update({ room });
  };

  return (
    <div className="room">
      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--width">Width:</label>
          <input
            type="number"
            name="room--width"
            id="width"
            value={room.width}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 100cm / max. 1200cm</small>
      </div>

      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--height">Height:</label>
          <input
            type="number"
            name="room--height"
            id="height"
            value={room.height}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 160cm / max. 300cm</small>
      </div>

      <div className="room__input">
        <span className="room__input__container">
          <label htmlFor="room--depth">Depth:</label>

          <input
            type="number"
            name="room--depth"
            id="depth"
            value={room.depth}
            onChange={changeRoom}
          />
          <div className="room__input__unit">cm</div>
        </span>
        <small className="room__input__limits">min. 100cm / max. 1200cm</small>
      </div>
    </div>
  );
};

export default Roomdimensions;