©2020-2024 ioDraw All rights reserved
<>1 Case structure
<> code
app.js
// Component form function Function form class class // 01 react event import React, { Component } from
'react'; // Import react and react assembly // import ChildA from './components/ChildA' //
import ChildB from './components/ChilB' // import Life from './components/Life'
import Todo from './pages/todo/index' // Define a App assembly inherit Component class App extends
Component { // Constructor constructor(props) { super(props); // Call parent component this.state = {
num: 1 } // Define a state （data data ） } // render nodes 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:" study react",status:0},
{done:true,title:" study vue",status:0}, {done:false,title:" Applets ",status:0} ] } } //
add to item addItem = e=>{ var list = this.state.list; // Get to original list
list.unshift({title:e.title,done:false,status:0}) // Add new data to list
this.setState({list}) // to update list } // delete item delItem = item=>{ var list =
this.state.list; var ind = list.indexOf(item); list.splice(ind,1);
this.setState({list}) } // item Be changed itemChange = (item,data)=>{ var list =
this.state.list; // Get the original list var ind = list.indexOf(item); // What is acquisition
list[ind]={...item,...data} // use data To cover item Properties of this.setState({list}) // to update list }
render() { let listUndo = this.state.list.filter(item=>!item.done); // hang in the air let
listDone = this.state.list.filter(item=>item.done); // Already completed return ( <div>
<h1>TodoList</h1> <Input addItem={this.addItem}></Input> {/* addItem Methods through the props
addItem Pass in to Input */} <h3> hang in the air ({listUndo.length})</h3> <List list={listUndo}
delItem={this.delItem} itemChange={this.itemChange} ></List> <h3> Already completed ({
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> )} ) // hold list adopt map Map to have Item An array of components
And pass in item Data to Item assembly } </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 // Abbreviation 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; // definition inp
adopt ref Function gets the input node return (<div> <input type="text" placeholder=" Add content "
ref={elem=>inp=elem} onKeyUp={e=>{ if(e.keyCode!==13){return}
addItem({title:inp.value,status:0}) inp.value = ""; }} /> <button
onClick={()=>{ // When you click the Add button, yes implement props Of addItem method
addItem({title:inp.value,status:0}); inp.value = ""; }}> add to </button> </div>) }
export default Input;
Technology