1:安装react官方脚手架
注意:需要在计算机上安装Node> = 6和npm> = 5.2
npx create-react-app my-app
cd my-app
npm start
2:调整目录结构
3:index.js(程序入口文件)
import React from 'react'; import ReactDOM from 'react-dom'; import TodoList from './TodoList'; ReactDOM.render(<TodoList />, document.getElementById('root'));
4:TodoList.js
import React, { Component ,Fragment} from 'react'; import TodoItem from './TodoItem'; class TodoList extends Component { constructor(props){ super(props); this.state={ inputValue:'', list:[], } } render() { return ( <Fragment>{/*一个占位符,只是为了包裹*/} <div> <input value={this.state.inputValue} onChange={this.handleInputChange}//this指的是TodoList /> <button onClick={this.handleBtnClick}>保存</button> </div> <ul> {this.getToDdoItem()}{/*函数加上括号,直接调用*/} </ul> </Fragment> ); } //用map循环遍历list getToDdoItem=()=>{ return this.state.list.map((item,index)=>{ return ( <TodoItem key={item} content={item} index={index}//传递给子组件的属性 deleteItem={this.handleItemDelete}//传递给字组件的函数, /> ) }) }; //使用箭头函数不用再bind(this) handleInputChange=(e)=>{ //旧的setState写法 // this.setState({ // inputValue: e.target.value // // 获取输入框里面的值 // }); // 新的setState写法1 const value=e.target.value;// 获取输入框里面的值 this.setState(()=>({ inputValue:value } )) }; // 点击提交按钮,在原来的数组基础上,添加输入框里的值 handleBtnClick=()=>{ //旧的setState写法 this.setState({ list:[...this.state.list,this.state.inputValue], inputValue:"", }) }; //点击之后根据索引删除 handleItemDelete=(index)=>{ // 新的setState写法2 this.setState((prevState)=>{//prevState=this.state const list=[...prevState.list]; list.splice(index,1); return { list,list } }) } } export default TodoList;
5:TodoItem.js
import React,{Component} from 'react'; class TodoItem extends Component{ render(){ const {content}=this.props;//解构出父组件传来的属性 return( <div onClick={this.handleClick}> {content} </div> ) } //这个函数利用父组件的删除方法 handleClick=()=>{ const {deleteItem ,index}=this.props; deleteItem(index);//调用父组件传来的属性和函数进行点击删除 } } export default TodoItem;