このセクションでは、リストの削除ボタンの機能を実装します。削除ボタンをクリックすると、削除するかどうかを尋ねるポップアップ ウィンドウが表示されます。削除を確認する場合はクリックします。削除しない場合はキャンセルをクリックします。
祖先コンポーネントと孫コンポーネント間の通信はすでに記述しているため、コードを直接記述します。
- 1. Appコンポーネント内のデータを削除する関数を定義する
export default class App extends Component {
// 定义列表的初始状态数据
state = {
todos: [
{
id:'001',name:'吃饭',done: true},
{
id:'002',name:'睡觉',done: true},
{
id:'003',name:'写代码',done: false},
]}
// 获取Header组件收集的任务项数据
addTodo = (todoObj) => {
const {
todos } = this.state
const newTodo = [todoObj, ...todos]
this.setState({
todos:newTodo})
}
// 更新状态数据
updateTodo = (id,done) => {
const {
todos } = this.state
const newTodos = todos.map(todoObj=>{
if (id === todoObj.id) return {
...todoObj,done}
return todoObj
})
this.setState({
todos:newTodos})
}
// 删除状态数据
deleteTodo = (id) => {
const {
todos } = this.state
const newTodos = todos.filter((todo)=>{
return todo.id !== id
})
this.setState({
todos: newTodos})
}
render() {
const {
todos } = this.state
return (
<div className="todo-container">
<div className="todo-wrap">
<Header addTodo={
this.addTodo}/>
<List todos={
todos} updateTodo={
this.updateTodo} deleteTodo={
this.deleteTodo}/>
<Footer/>
</div>
</div>
)
}
}
ここでは、配列をフィルタリングしてid、削除するタスク アイテムを除外します。
- 2. List コンポーネントでこの属性を受け取り、props 制限を作成します
export default class List extends Component {
// 对props做类型和必要性的限制
static propTypes = {
updateTodo: PropTypes.func.isRequired,
todos: PropTypes.array.isRequired,
deleteTodo: PropTypes.func.isRequired
}
render() {
const {
todos,updateTodo,deleteTodo } = this.props
return (
<ul className="todo-main">
{
todos.map(todo=>{
return <Item key={
todo.id} {
...todo} updateTodo={
updateTodo} deleteTodo={
deleteTodo} />
})
}
</ul>
)
}
}
- 3. アイテムコンポーネントの削除ボタンにクリックイベントを追加します。
export default class Item extends Component {
// 初始化状态数据
state = {
mouseIn:false}
// 鼠标移入移出回调函数
mouseHandle = (flag) => {
this.setState({
mouseIn:flag})
}
// 更新任务项状态
checkHandle = (id,event) => {
this.props.updateTodo(id,event.target.checked)
}
// 删除任务项
deleteHandle = (id) => {
if(window.confirm('确定删除该任务吗？')) {
this.props.deleteTodo(id)
}
}
render() {
const {
id,name,done} = this.props
const {
mouseIn} = this.state
return (
<li onMouseEnter={
()=>this.mouseHandle(true)} onMouseLeave={
()=>this.mouseHandle(false)} style={
{
backgroundColor: mouseIn?'gainsboro':''}}>
<label>
<input type="checkbox" defaultChecked={
done} onChange={
event=>this.checkHandle(id,event)}/>
<span>{
name}</span>
</label>
<button onClick={
()=>this.deleteHandle(id)} className="btn btn-danger" style={
{
display:mouseIn?"block":"none"}}>删除</button>
</li>
)
}
}
- 最後に効果を見てみましょう
ここまででTodolistの削除機能を実装しました。