問題
這是一個問題形式，一個問題有很多答案。用戶可以在表單中添加、編輯、洗掉答案。
答案存盤在字串陣列中。我們將使用此陣列來呈現答案輸入及其相應的“洗掉”按鈕。
我試過的：
- 將索引設定為鍵：當從陣列中洗掉一個元素時，React 未能呈現剩余的問題（它洗掉了錯誤的元素），盡管來自的值
useState計算正確。 - Set value as key: 改變文本的輸入元素重新渲染，因此每次我們輸入一個字符時它都會失去焦點。
我們如何解決這個問題？
CodeSandbox 鏈接：https ://codesandbox.io/s/multiplechoicequestionform-2h0vp ? file =/ src/App.js
import { useState } from "react";
function MultipleChoiceQuestionForm() {
const [answers, setAnswers] = useState<string[]>([]);
const addAnswer = () => setAnswers([...answers, ""]); // Add a new empty one at bottom
const removeAnswerAtIndex = (targetIndex: number) => {
setAnswers(answers.filter((_, index) => index !== targetIndex));
};
const onAnswerChangeAtIndex = (newAnswer: string, targetIndex: number) => {
const newAnswers = [...answers];
newAnswers[targetIndex] = newAnswer;
setAnswers(newAnswers)
};
return <form>
{answers.map((answer, index) =>
<div
// I think the problem is the key, how to set this correctly ?
// Set to index: make removing elements has re-render errors
key={index}
// key={answer} // Lose focus on each character typed
style={{ display: "flex" }}
>
<input type="text" onChange={(e) => onAnswerChangeAtIndex(e.target.value, index)} />
<button onClick={(_) => removeAnswerAtIndex(index)}>Remove</button>
</div>
)}
<button onClick={addAnswer}>Add</button>
</form>
}
uj5u.com熱心網友回復：
我認為您忘記將答案值系結到輸入元素。現在您的所有輸入都是不受控制的，這不是處理添加或洗掉專案的動態表單的最佳方式，最好使它們受到控制。
就這樣做：
<input
type="text"
value={answer}
onChange={(e) => onAnswerChangeAtIndex(e.target.value, index)}
/>
作業代碼沙盒示例
這里的其他好做法可能是使用其他一些結構作為答案，例如，代替字串創建一個物件id（您可以自己生成它們，作為最簡單的方法，只需使用Math.random()）和value每個答案的屬性，這樣您就可以使用它id 作為真正的密鑰。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/370926.html
上一篇：回傳包含搜索字串的句子