©2020-2024 ioDraw All rights reserved,
Privacy Policy
<>1 案例结构
<>代码
app.js
//组件形式 function 函数形式 class类 // 01 react事件 import React, { Component } from
'react'; // 导入react和react组件 // import ChildA from './components/ChildA' //
import ChildB from './components/ChilB' // import Life from './components/Life'
import Todo from './pages/todo/index' //定义一个App组件 继承Component class App extends
Component { //构造函数 constructor(props) { super(props); //调用父组件 this.state = {
num: 1 } //定义一个状态 （data数据） } //渲染节点 render() { return ( <div > <Todo></Todo>
</div> ); } } export default App;
index.js
import React, { Component } from 'react' import List from './List'; import
Input from './Input' class Todo extends Component { constructor(props) {
super(props); this.state = { list:[ {done:false,title:"学习react",status:0},
{done:true,title:"学习vue",status:0}, {done:false,title:"小程序",status:0} ] } } //
添加item addItem = e=>{ var list = this.state.list; //获取到原list
list.unshift({title:e.title,done:false,status:0}) //把新数据添加到list
this.setState({list}) //更新list } // 删除item delItem = item=>{ var list =
this.state.list; var ind = list.indexOf(item); list.splice(ind,1);
this.setState({list}) } // item被改变 itemChange = (item,data)=>{ var list =
this.state.list; //获取原来的list var ind = list.indexOf(item); //获取是第几个
list[ind]={...item,...data} //用data 去覆盖item的属性 this.setState({list}) //更新list }
render() { let listUndo = this.state.list.filter(item=>!item.done); //未完成 let
listDone = this.state.list.filter(item=>item.done); //已经完成 return ( <div>
<h1>TodoList</h1> <Input addItem={this.addItem}></Input> {/* addItem方法通过props
addItem传入给Input */} <h3>未完成({listUndo.length})</h3> <List list={listUndo}
delItem={this.delItem} itemChange={this.itemChange} ></List> <h3>已经完成({
listDone.length})</h3> <List list={listDone} delItem={this.delItem}
itemChange={this.itemChange} ></List> </div> ); } } export default Todo;
List.js
import React from 'react' import Item from './Item.js' function
List({list,delItem,itemChange}){ return ( <div className="list"> { list.map(
item=>{ return ( <Item key={item.title} item={item} delItem={delItem}
itemChange={itemChange}> </Item> )} ) // 把list通过map映射为有Item组件的数组
并传入item数据给Item组件 } </div>) } export default List;
Item.js
import React, { Component } from 'react' class Item extends Component {
constructor(props) { super(props); this.state = { } } render() { let
{item,delItem,itemChange} = this.props // 简写props.item return ( <div> <span>
<input type="checkbox" checked={item.done}
onChange={e=>itemChange(item,{done:e.target.checked})}/>
<span>{item.title}</span> <button onClick={()=>{delItem(item)}}>×</button>
</span> </div> ); } } export default Item;
Input.js
import React from 'react'; function Input({addItem}){ let inp = null; //定义inp
通过ref函数获取到 input节点 return (<div> <input type="text" placeholder="添加内容"
ref={elem=>inp=elem} onKeyUp={e=>{ if(e.keyCode!==13){return}
addItem({title:inp.value,status:0}) inp.value = ""; }} /> <button
onClick={()=>{ // 当单击添加按钮是 执行props 的addItem方法
addItem({title:inp.value,status:0}); inp.value = ""; }}>添加</button> </div>) }
export default Input;