我有輸入值，我收集這些值并將其發送到 firebase（作為字串、物件和陣列）。
所有輸入作業正常。我唯一遇到困難的是動態的，它是通過輸入陣列上的 map() 方法呈現的。我在輸入上使用 onChange 方法并且能夠得到不令人滿意的結果：要么只從輸入陣列中獲取最后一個值，要么將每個字符輸入作為事件從而創建這樣的陣列：['b', 'be', 't', 'th', 'the', 'g', 'gy', 'g', 'gu', 'guy']。
什么是正確的方法？嘗試同時使用 array.push() 和 useState([])。
所以我試圖收集動態呈現輸入的值。這是相關的代碼片段：
const [newTodo, setNewTodo] = useState([]);
const [todoInput, setTodoInput] = useState([{ todo: "" }]);
這將值 (be, the, guy) 作為 newTodo = ['b', 'be', 't', 'th', 'the', 'g', 'gy', 'g', 'gu ', '家伙']
{todoInput.map((singleTodo, index) => (
<div key={index}>
<input
type="text"
className="todo-input"
onChange={(event) => {
newTodo.push(event.target.value);
}}
這會將 newTodo 回傳為 ['guy']：
{todoInput.map((singleTodo, index) => (
<div key={index}>
<input
type="text"
className="todo-input"
onChange={(event) => {
setNewTodo([event.target.value]);
}}
這也回傳 newTodo = ['b', 'be', 't', 'th', 'the', 'g', 'gy', 'g', 'gu', 'guy']：
{todoInput.map((singleTodo, index) => (
<div key={index}>
<input
type="text"
className="todo-input"
onChange={(event) => {
setNewTodo([...newTodo, event.target.value]);
}}
背景關系的整個組件：
const AddTask = () => {
const db = getFirestore();
const colTaskRef = collection(db, "Task");
const [newTitle, setNewTitle] = useState("");
const [newInCharge, setNewInCharge] = useState("");
const [newCollabs, setNewCollabs] = useState([]);
const [newPriority, setNewPriority] = useState("");
const [newTodo, setNewTodo] = useState([]);
const [todoInput, setTodoInput] = useState([{ todo: "" }]);
const handleTodoAdd = () => {
setTodoInput([...todoInput, { todo: "" }]);
};
const handleTodoRemove = (index) => {
const list = [...todoInput];
list.splice(index, 1);
setTodoInput(list);
};
const handleSelect = (e) => {
setNewInCharge(e.target.value);
};
const handleCheck = (e) => {
setNewCollabs([...newCollabs, e.target.value]);
};
const handleClick = () => {
console.log(newTodo);
createTask();
};
const createTask = async () => {
await addDoc(colTaskRef, {
Title: newTitle,
InCharge: newInCharge,
Priority: newPriority,
Todos: newTodo,
Collaborators: newCollabs,
InProgress: false,
Completed: false,
});
};
return (
<div className="container add__task-container">
<input
className="title-input"
type="text"
placeholder="Task Title"
onChange={(event) => {
setNewTitle(event.target.value);
}}
/>
<label htmlFor="selectInCharge"> Who's in charge of this task?</label>
{<GetCollaborators handleSelect={handleSelect} />}
<p className="collaborators__checkbox-title">
Who do you want to collaborate with?
</p>
{<GetCollaboratorsCheckBox handleCheck={handleCheck} />}
<label className="priority-label" htmlFor="priority">
Priority?
</label>
<select
name="priority"
className="priority-selector"
onChange={(event) => {
setNewPriority(event.target.value);
}}
>
<option value="top"> Top </option>
<option value="first">First</option>
<option value="second">Second</option>
<option value="last">Bottom</option>
</select>
<p className="todos__add-title">To Do list:</p>
{todoInput.map((singleTodo, index) => (
<div key={index}>
<input
type="text"
className="todo-input"
onChange={(event) => {
setNewTodo([...newTodo, event.target.value]);
}}
/>
{todoInput.length - 1 === index && todoInput.length < 5 && (
<button className="plus-btn" onClick={handleTodoAdd}>
</button>
)}
{todoInput.length > 1 && (
<button
className="minus-btn"
onClick={() => handleTodoRemove(index)}
>
-
</button>
)}
</div>
))}
<button className="btn btn__task-submit" onClick={handleClick}>
Submit Task
</button>
</div>
);
};
uj5u.com熱心網友回復：
如果您不希望事件監聽器在更改時觸發，請不要使用該onChange事件。
如果你告訴你的函式在每次輸入改變時執行，它就會執行。您可能應該使用其他形式的事件來觸發您的偵聽器 - 可能是輸入完成后按下的按鈕。或者在某個按鈕上按下（空格鍵/輸入）或 onBlur。我不知道你希望在什么時候將輸入實際添加到陣列中。根據這一點，選擇一個真正符合您目的的事件（onClick例如按下按鈕）
ReactsonChange使用 html/JS 事件oninput而不是onchange
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533619.html