我一直在嘗試除錯這個數小時，并查看了其他所有具有相同問題風格的 Stack Overflow 問題，但他們都只是說使用密鑰，但這對我仍然不起作用。我已經為我的代碼制作了一個更簡單的示例來復制錯誤。
import React from 'react'
import { useState } from 'react'
const FormTest = () => {
const [name, setName] = useState('')
const TestExperience = (props) => {
return (<div>
<h1>Test Experience {props.num}</h1>
<input
type="text"
name="name"
placeholder="Name"
/>
</div>)
}
const processFormData = (event) => {
event.preventDefault();
console.log(event.target);
}
const [nums, setNums] = useState([1, 2, 3]);
const arr = nums.map((num, index) => <TestExperience num={num} key={index}/>);
return (
<div>
<form onSubmit={(event) => {
processFormData(event);
}}>
{arr}
<button onClick={() => {
setNums([...nums, nums.length 1]);
}}>Add one!</button>
</form>
</div>
)
}
export default FormTest
我試過將 TestExperience 移到它自己的獨立函式中。我試圖基本上擁有可以創建更多的輸入，而這個失去焦點的問題來自這樣一個事實，即每次添加輸入時，由于重新渲染，所有現有的 formData 都消失了。目標是只使用 onSubmit 函式來決議資料，但由于添加輸入后它消失了，我想我需要存盤它。我一直在一個又一個的兔子洞里試圖解決一個看起來如此簡單的問題，并且在我嘗試的每個實作中不斷遇到問題。
總體目標是我有一個提交按鈕和一個添加輸入按鈕，我試圖放棄整個 value={stateVariable} 和 onChange={setStateVariable} 東西，只是讓輸入按鈕成為“提交”按鈕，這樣我就可以運行 processFormData 并根據它是哪個提交按鈕做不同的事情，但是我不知道如何檢查當有兩個不同的按鈕時提交來自哪個按鈕，所以對此的答案也可能非常有幫助，因為那樣我可以避免整個狀態混亂。
uj5u.com熱心網友回復：
你需要移動TestExperience出來的FormTest。
import React from "react";
import { useState } from "react";
const TestExperience = (props) => {
const [name, setName] = useState("");
return (
<div>
<h1>Test Experience {props.num}</h1>
<input
type="text"
name="name"
placeholder="Name"
onChange={(event) => {
event.preventDefault();
setName(event.target.value);
}}
value={name}
/>
</div>
);
};
const FormTest = () => {
const processFormData = (event) => {
event.preventDefault();
console.log(event.target);
};
const [nums, setNums] = useState([1, 2, 3]);
const arr = nums.map((num, index) => (
<TestExperience num={num} key={index} />
));
return (
<div>
<form
onSubmit={(event) => {
processFormData(event);
}}
>
{arr}
//another way I tried to do it below //
{nums.map((num, index) => (
<TestExperience num={num} key={index} />
))}
<button
onClick={() => {
setNums([...nums, nums.length 1]);
}}
>
Add one!
</button>
</form>
</div>
);
};
export default FormTest;
代碼沙箱 => https://codesandbox.io/s/trusting-elbakyan-mxrez?file=/src/App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/380011.html
標籤：javascript html 反应 jsx