我正在尝试学习 react js，但我不知道如何从我的列表中删除一个项目，你能帮我吗？实际上，我并不专业，但我真的对学习很感兴趣，我的代码可以正确地将一些新项目添加到我的列表中，但是当我点击他们的复选框/删除按钮时，我不知道如何删除它们。
import React, { useState } from "react";
const App = () => {
const [NewTaskText, setNewTaskText] = useState("");
const [Tasks, setTasks] = useState(["do a task", "samira"]);
const addTask = (e) => {
e.preventDefault();
if (!NewTaskText) return;
setTasks((currentTasks) => {
return [...currentTasks, NewTaskText];
});
setNewTaskText("");
};
const onchangeInput = (e) => {
const value = e.target.value;
setNewTaskText(value);
};
return (
<div className="row">
<form onSubmit={addTask}>
<div className="row col s6">
<div className="input-field col s10">
<textarea
id="textarea1"
className="materialize-textarea"
value={NewTaskText}
onChange={onchangeInput}
></textarea>
<label htmlFor="textarea1">What needs to be done ?</label>
</div>
</div>
<div className="row col s6">
<br></br>
<a className='waves-effect waves-light btn' href="/#" onClick={addTask}>
<i className='material-icons left' >
add_circle
</i>
Add
</a>
</div>
</form>
<div className="row">
<div className="row col s9">
<ul className="collection with-header">
<li className="collection-header">
<h4>Todo List</h4>
<form>
<div className="input-field">
<input id="search" type="search" required />
<label className="label-icon" htmlFor="search">
<i className="material-icons">search</i>Search
</label>
<i className="material-icons">close</i>
</div>
</form>
</li>
<label>
{Tasks.map((item, i) => {
return (
<li className="collection-item" key={i}>
<input type="checkbox" />
<span>
{item}
</span>
<span>
<a href="#!" className="secondary-content">
<i className="material-icons" >delete</i>
<i className="material-icons">check_circle</i>
</a>
</span>
</li>
);
})}
</label>
</ul>
</div>
</div>
</div>
);
};
export default App;
您可以使用索引从数组中删除项目：
<i className="material-icons" onClick={() => handleDelete(i)}>delete</i>
并在 return 语句上方定义您的函数：
const handleDelete = i => {
const taskList = [...Tasks]
taskList.splice(i, 1)
setTasks(taskList)
}
在这里，重要的是要知道，如果状态是 anobject或 an ，则必须制作该状态的副本array。因为如果您修改原始数组或对象，react 不会将其注册为更改，也不会重新渲染。这就是为什么我这样做了const taskList = [...Tasks]。您还可以使用类似的库lodash，它提供了一些处理对象和数组的巧妙方法
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句