当我通过数字输入更新状态中的数字值时,我在一些检查中遇到了一些问题。
我正在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;
1条答案
按热度按时间b4qexyjb1#
onBlur做得很好,只是没有同时更新所有三个维度。