我想使用成幀器運動創建具有相同頁面的回應式多個表單（form1、form2 和 form3） 。但是，當我創建狀態value并希望在用戶通過在 handleChange 中使用 setValue 填寫表單時使其更改時，狀態的值不會按照我的意愿正確更新。當用戶填寫時Select Protocol，填寫的表單不會在用戶螢屏上更新，但狀態會發生變化。此外，當用戶Select number of hops在此之后填寫時，link level狀態將被洗掉。我不知道如何解決這個問題。
import React, { useState, useEffect } from "react";
import { motion, AnimatePresence } from "framer-motion";
export default function ExperC() {
// state that I want to collect user fill form
const [value, setValue] = useState({
link_level: "",
hop_select: "",
num_hop: "",
location_1: "",
location_2: "",
photon_loss: "",
dep: "",
gate_error: "",
coherent: "",
mea_error: "",
trajectory: "",
});
const handleChangeLinklevel = (e) => {
setValue({ ...value, link_level: e.target.value });
};
const handleChangeHop = (e) => {
setValue({ ...value, hop_select: e.target.value });
};
// jsx of form 1
const form1 = (
<form action="" className="w-[140%]">
<div className="flex space-x-2">
<h1 className="text-[#fff] text-4xl">Configure your </h1>
<h1 className="text-[#ad73f1] text-4xl">Qwanta network</h1>
</div>
<p className="mt-5 mb-2 text-gray-400">Select Protocol</p>
<select
className="w-full h-8 text-black bg-white"
onChange={handleChangeLinklevel}
value={value.link_level}
>
<option value="" disabled selected>
Select your protocol
</option>
<option value="0G">0 Generation (0G)</option>
<option value="1G">1G-Ss-Dp (1G)</option>
<option value="2G-NCX">2G-NonLocal-CNOT (2G-NCX)</option>
<option value="HG-DE">1-2G-Directed-Encoded, (HG-DE)</option>
<option value="HG-E2E-PE">HG-E2E-PurifiedEncoded</option>
<option value="Design own protocol">Design own protocol</option>
</select>
{useEffect(() => {
console.log("test", value);
})}
<p className="mt-5 mb-2 text-gray-400">Select number of hops</p>
<select
className="w-full h-8 text-black bg-white"
onChange={handleChangeHop}
value={value.hop_select}
>
<option value="" disabled selected>
2^n hops
</option>
<option value="2">2 hops, 3 nodes</option>
<option value="4">4 hops, 5 nodes</option>
<option value="8">8 hops, 9 nodes</option>
</select>
</form>
);
const form2 = <>This is form 2</>
const form3 = <>This is form 3</>;
// for responsive slide between form using framer motion
const experitem = [
{ name: "config1", icon: "test1", form: form1 },
{ name: "config2", icon: "test2", form: form2 },
{ name: "config3", icon: "test3", form: form3 },
];
const [selectedTab, setSelectedTab] = useState(experitem[0]);
return (
<div className="flex flex-col w-[800px] h-[600px] absolute top-[150px] bg-[#262626] left-1/3 rounded-xl overflow-hidden">
<nav className="bg-gray1 pt-3 px-3 rounded-t-xl h-[60px]">
<ul className="flex w-full">
{experitem.map((item, index) => (
<motion.li
key={index}
className={`text-white list-none cursor-pointer rounded-t-xl w-full p-3 relative bg-[#262626] h-[70px] flex justify-between align-middle flex-1 min-w-0
`}
onClick={() => setSelectedTab(item)}
initial={{ y: 0 }}
whileHover={{ y: -5 }}
>
{item.name}
{/* {item == selectedTab ? (
<div className="absolute -bottom-[2px] left-0 right-0 h-[1px] bg-blue-500" />
) : null} */}
</motion.li>
))}
</ul>
</nav>
<main className="bg-[#262626] flex justify-left align-middle flex-grow mt-6 ml-5">
<AnimatePresence exitBeforeEnter>
<motion.div
key={selectedTab ? selectedTab.name : "empty"}
initial={{ x: -100, opacity: 0 }}
animate={{ x: 0, opacity: 1 }}
exit={{ x: -10, opacity: 0 }}
transition={{ duration: 0.2 }}
>
{selectedTab ? selectedTab.form : null}
</motion.div>
</AnimatePresence>
</main>
</div>
);
}
uj5u.com熱心網友回復：
這里的問題是，一旦它們處于此 const form1 中，您就在 const 中定義您的表單，該值在宣告時被保存為其值，而不是通過 ref 因此它會改變并且您無法看到它，因為在 const 內部link_level 仍然是空字串，這也解釋了為什么當您從第二個選擇值重置時，因為
setValue({ ...value, hop_select: e.target.value });
將采用 form1 中的值，它是空字串要解決這個問題，只需為每個表單創建一個反應組件，這將解決它這里是一個簡單編輯的鏈接https://codesandbox.io/s/jolly-aryabhata-jffddt?file =/src/App.js
uj5u.com熱心網友回復：
如果您不直接在 中參考您的表單experitem，而是id基于它分配并呈現表單id，那么您可以避免它被重置。但最好只為表單創建單獨的組件。
// Use an ID here instead of the element itself
const experitem = [
{ name: "config1", icon: "test1", formId: 0 },
{ name: "config2", icon: "test2", formId: 1 },
{ name: "config3", icon: "test3", formId: 2 },
];
// This state determines which formId to use
const [selectedTab, setSelectedTab] = useState(0);
<ul className="flex w-full">
{experitem.map((item, index) => (
<li
key={index}
// Set the state to the id of the form you want to see
onClick={() => setSelectedTab(item.formId)}
>
{item.name}
</li>
))}
</ul>
// Render the forms based on that id
{selectedTab === 0 ? form1 : selectedTab === 1 ? form2 : form3}轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/522445.html
上一篇：如何更改下拉選項的值屬性？