React数字验证并在提交数字输入后更新状态，而不是在onChange时更新。

huangapple
go评论97阅读模式
英文:

React number validation and update state after submitting number input, not onChange

问题

我在通过数字输入更新状态时遇到了一些检查问题。我正在使用React Three Fiber构建一个3D配置器，希望通过侧边栏使房间大小可变。全局状态在zustand存储中更新正常，但我在希望在值离开输入字段后运行的检查方面遇到了问题。我已经研究过onSubmit和onBlur，但似乎它们不起作用...

谢谢你们！

英文:

I had some issues with some checks when I update number values in a state through a number input.

I'm working on a 3Dconfigurator in React Three Fiber and want to make my room size variable through my sidepanel. Global states are updated in a zustand store and that works fine, but I keep having issues with the checks I want to run on my values. I can only get them to run on change, which prevents me from updating the numbers properly.

How can I update the state and run the checks only after leaving the input fields?
I already researched onSubmit and onBlur but those seemed not to work...

Thank you all in advance!

  1. import { useAppStore } from "@/stores/appStore";
  3. const Roomdimensions = () => {
  4.   const update = useAppStore((state) => state.update);
  5.   const room = useAppStore((state) => state.room);
  7.   const changeRoom = () => {
  8.     let roomwidth = document.querySelector("#width").value;
  9.     let roomheight = document.querySelector("#height").value;
  10.     let roomdepth = document.querySelector("#depth").value;
  12.     if (roomwidth < 100 || roomwidth > 1200) {
  13.       update({
  14.         room: { width: 300, height: roomheight, depth: roomdepth },
  15.         showAlert: true,
  16.         alertAction: "notification",
  17.         alertMessage: "Room width must be between 100cm and 1200cm",
  18.       });
  19.     }
  20.     if (roomdepth < 100 || roomdepth > 1200) {
  21.       roomdepth = 300;
  22.       update({
  23.         room: { width: roomwidth, height: roomheight, depth: 300 },
  24.         showAlert: true,
  25.         alertAction: "notification",
  26.         alertMessage: "Room depth must be between 100cm and 1200cm",
  27.       });
  28.     }
  30.     if (roomheight < 180 || roomheight > 300) {
  31.       roomheight = 210;
  32.       update({
  33.         room: { width: roomwidth, height: 210, depth: roomdepth },
  34.         showAlert: true,
  35.         alertAction: "notification",
  36.         alertMessage: "Room height must be between 180cm and 300cm",
  37.       });
  38.     }
  40.     const room = {
  41.       width: roomwidth,
  42.       height: roomheight,
  43.       depth: roomdepth,
  44.     };
  45.     update({ room });
  46.   };
  48.   return (
  49.     <div className="room">
  50.       <div className="room__input">
  51.         <span className="room__input__container">
  52.           <label htmlFor="room--width">Width:</label>
  53.           <input
  54.             type="number"
  55.             name="room--width"
  56.             id="width"
  57.             value={room.width}
  58.             onChange={changeRoom}
  59.           />
  60.           <div className="room__input__unit">cm</div>
  61.         </span>
  62.         <small className="room__input__limits">min. 100cm / max. 1200cm</small>
  63.       </div>
  65.       <div className="room__input">
  66.         <span className="room__input__container">
  67.           <label htmlFor="room--height">Height:</label>
  68.           <input
  69.             type="number"
  70.             name="room--height"
  71.             id="height"
  72.             value={room.height}
  73.             onChange={changeRoom}
  74.           />
  75.           <div className="room__input__unit">cm</div>
  76.         </span>
  77.         <small className="room__input__limits">min. 160cm / max. 300cm</small>
  78.       </div>
  80.       <div className="room__input">
  81.         <span className="room__input__container">
  82.           <label htmlFor="room--depth">Depth:</label>
  84.           <input
  85.             type="number"
  86.             name="room--depth"
  87.             id="depth"
  88.             value={room.depth}
  89.             onChange={changeRoom}
  90.           />
  91.           <div className="room__input__unit">cm</div>
  92.         </span>
  93.         <small className="room__input__limits">min. 100cm / max. 1200cm</small>
  94.       </div>
  95.     </div>
  96.   );
  97. };
  99. export default Roomdimensions;

答案1

得分: 1

onBlur 在更新三个维度时有效，但不适用于同时更新所有三个维度。

感谢 @LynnC.，让我查看 onfocusout 并重新开始研究这个错误。

英文:

onBlur did the trick just fine, just not while updating all three of the dimensions at once.

Thank you @LynnC. to make me check out onfocusout and get back on track with researching the bug.

huangapple
  • 本文由 发表于 2023年4月17日 22:06:00
  • 转载请务必保留本文链接：https://go.coder-hub.com/76036042.html
  • forms
  • onchange
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定