动态元素上的onChange来收集数组中的对象
动态元素上的onChange来收集数组中的对象
提问于 2022-11-14 18:52:20
我有输入，这些值是我收集并发送到firebase的(作为字符串、对象和数组)。
所有输入都很好。我所遇到的唯一一个是动态的，它是通过一个输入数组上的map()方法呈现的。我在输入上使用了onChange方法，得到了不满意的结果:要么只从输入数组中得到最后的值，要么让每个牧师作为一个事件来创建这样的数组：'b'，'be'，'t'，'th'，' the '，'g'，'gy'，'g'，‘g’，'guy‘，’guy‘。
正确的方法是什么？尝试使用array.push()和useState([])。
因此，我试图收集动态呈现的输入的值。以下是相关的代码片段：
const [newTodo, setNewTodo] = useState([]);
const [todoInput, setTodoInput] = useState([{ todo: "" }]);它以newTodo = 'b‘、'be’、't‘、'th’、' the‘、'g’、'gy‘、'g’、‘g’、'gu‘、'guy’的形式返回值(be，the，guy)。
{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'，'guy‘，’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>
);
};回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-14 19:59:36
如果不希望事件侦听器在更改时触发，请不要使用onChange事件。
如果您告诉您的函数在每次输入更改时执行，它就会做到这一点。您可能应该使用其他形式的事件来触发您的监听器--可能是输入完成后按下的按钮。或者在某个按钮(空格键/回车)或onBlur上。我不知道在什么时候要将输入实际添加到数组中。根据这一点，选择一个符合您需要的事件(例如，按钮压力机的onClick)。
React onChange使用html/JS事件oninput而不是onchange
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74436492
复制相关文章
相似问题
腾讯云开发者
