4. react 基础 - 编写 todoList 功能

编写 TodoList 功能

　　react 入口 js

　　#src/index.js

　　　　import React from 'react';

　　　　import ReactDOM from 'react-dom';

　　　　import TodoList from './TodoList'

　　　　ReactDOM.render(<TodoList />, document.getElementById('root'));

　　#src/TodoList.js

　　　　// Fragment 为占位符

　　　　import React, { Component , Fragment } from 'react';

　　　　class TodoList extends Component

　　　　{

　　　　　　render(){

　　　　　　　　// 每一个 render 的 标签 只能返回一个标签 其他的都包含在这个标签内

　　　　　　　　// 使用 Fragment 能 不然最外层元素 被渲染出来

　　　　　　　　return (

　　　　　　　　　　<Fragment>

　　　　　　　　　　　　<input type='text' /> <button>提交</button>

　　　　　　　　　　　　<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>

　　　　　　　　　　</Fragment>

　　　　　　　　　　);

　　　　　　}

　　　　}　　// 导出 TodoList

　　　　export default TodoList

　　//添加 input change 事件

　　# todoList.js

　　　　import React, { Component , Fragment } from 'react';

　　　　class TodoList extends Component

　　　　{

　　　　　　constructor( props ){

　　　　　　　　// 必须 调用一次 父类 constructor 完成父类初始化

　　　　　　　　super(props)

　　　　　　　　//对 需要使用的 数据 进行定义 ( 定义在 this.state 下 )

　　　　　　　　this.state = {　inputValue: ''　}

　　　　　　}

　　　　　　render(){

　　　　　　　　return (

　　　　　　　　　　<Fragment>

　　　　　　　　　　　　{/* 定义该 文本框的 值 为 this.state.inputValue , 改变事件为 this.inputChange  并制定 该事件的 this 为 TodoList 这个类 */}

　　　　　　　　　　　　<input type='text' value={this.state.inputValue}  onChange={this.inputChange.bind(this)} />

　　　　　　　　　　　　　　<button>提交</button>

　　　　　　　　　　　　<ul><li>吃饭</li><li>睡觉</li><li>打豆豆</li></ul>

　　　　　　　　　　</Fragment>

　　　　　　　　　　);

　　　　　　}

　　　　　　inputChange(e){

　　　　　　　　// 设置 this.state.inputValue 的 值 等于 输入的值

　　　　　　　　this.setState( {inputValue: e.target.value} );

　　　　　　}

　　　　}　　// 导出 TodoList

　　　　export default TodoList

　　//添加 列表 增加删除功能

　　　　import React, { Component , Fragment } from 'react';

　　　　class TodoList extends Component

　　　　{

　　　　　　constructor( props ){

　　　　　　　　// 必须 调用一次 父类 constructor 完成父类初始化

　　　　　　　　super(props)

　　　　　　　　//对 需要使用的 数据 进行定义 ( 定义在 this.state 下 )

　　　　　　　　this.state = {　inputValue: '', list: [] }

　　　　　　}

　　　　　　render(){

　　　　　　　　return (

　　　　　　　　　　<Fragment>

　　　　　　　　　　　　{/* 定义该 文本框的 值 为 this.state.inputValue , 改变事件为 this.inputChange  并制定 该事件的 this 为 TodoList 这个类 */}

　　　　　　　　　　　　<input type='text' value={this.state.inputValue}  onChange={this.inputChange.bind(this)} />

　　　　　　　　　　　　　　{/* 添加点击事件 进行数据添加 */}

　　　　　　　　　　　　　　<button onClick={this.addClick.bind(this)}>提交</button>

　　　　　　　　　　　　<ul>

　　　　　　　　　　　　　　{

　　　　　　　　　　　　　　　　this.state.list.map((value, index)=>{

　　　　　　　　　　　　　　　　　　// 添加删除子项功能

　　　　　　　　　　　　　　　　　　return <li key={index} onClick={this.itemDelete.bind(this, index)}>{value}</li>

　　　　　　　　　　　　　　　　})

　　　　　　　　　　　　　　}

　　　　　　　　　　　　</ul>

　　　　　　　　　　</Fragment>

　　　　　　　　　　);

　　　　　　}

　　　　　　inputChange(e){

　　　　　　　　// 设置 this.state.inputValue 的 值 等于 输入的值

　　　　　　　　this.setState( {inputValue: e.target.value} );

　　　　　　}

　　　　　　addClick(){

　　　　　　　　// 点击之后 添加 输入框内的 value 到

　　　　　　　　this.setState({

　　　　　　　　　　list : [...this.state.list, this.state.inputValue],

　　　　　　　　　　inputValue: ''

　　　　　　　　})

　　　　　　}

　　　　　　itemDelete(index){

　　　　　　　　// 根据 immutable 原则 state 内的 数值 不允许我们 做任何改变

　　　　　　　　const list = [...this.state.list];

　　　　　　　　list.splice(index, 1);

　　　　　　　　this.setState({list:list});

　　　　　　}

　　　　}　　// 导出 TodoList

　　　　export default TodoList