React: Todolist案例

今天我们写一个小小的案例，来进行一个简单的增，删，改，查的操作。

1. 首先，我们来创建一个 Todolist.js 组件

import React from 'react';

class Todolist extends React.Component{
	//构造方法
	constructor(props){
		super(props);
		this.state={
		 list: [],  //展示列表
		}
	}
}

render(){
	return(
		<div>
        <div>
        //在页面中展示出输入框，和添加按钮
          <input value={this.state.inputValue} }></input>
          <button >添加</button>
        </div>
        <ul>
        //遍历数据，并使其展示在页面
          {this.state.list.map((item,index) => {
            return <li key={index}>
             {/* key属性为唯一值，没有该属性，浏览器会报警告信息，在做添加操作时会出bug */}
                    {item}&nbsp;&nbsp;
                  </li>
          })}
        </ul>

      </div>
	)
}

export default Todolist;

引用组件

import React from 'react';
import ReactDOM from 'react-dom';
import TodoList from './TodoList';

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

2.添加列表项功能（增）

在输入框中添加 ref 属性

<input type="text" ref='input'></input>

在 ‘添加’ 按钮增加点击事件

<button onClick={this.btnClick.bind(this)} >添加</button>

添加点击事件

btnClick(){
		//获取到输入框的值
        var val=this.refs.input.value;
        this.setState({
            list:[...this.state.list,val]//...为展开运算符，将this.state.list内容放到当前的list中
        });
        this.refs.input.value='' //点击添加按钮，清空输入框

    }

3. 删除列表元素（删）

在无序列表中加入删除按钮，并增加点击事件

<button onClick={this.Delete.bind(this,index)}>删除</button>

删除事件

 Delete(index){
        const list=[...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        });
    }

4. 修改（改）

   <button onClick={this.handleUpdate.bind(this,index)}>修改</button>

添加一个修改事件

 Update(index){
 		
 		//弹出提示框，输入修改内容
        var rel=window.prompt('请输入新内容：');
        if(rel != null){
            this.state.list.splice(index,1,rel);
            this.setState({
                list:this.state.list
            });
        }

    }

5.完整代码，并进行了优化。

import React from 'react';

class Dolist extends React.Component{
    

    // 构造方法
    constructor(props){
        super(props);
        this.state={
            list:[],

        }
    }
    componentWillMount(){

        //从localStrong中获取myList
        var myList = window.localStorage.getItem('myList');
        if(myList==null || myList==''){
            myList = [];//初始化myList数组
        }else{
            myList = myList.split(',');
        }
    
        this.setState({
            list:myList
        });
     }




    // 添加点击事件
    btnClick(){
        var val=this.refs.input.value;
        this.setState({
            list:[...this.state.list,val]
        },()=>{
            console.log(this.state.list);
            window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
          });
        this.refs.input.value=''
    }

    //键盘事件
    keyDown(e){
        if(e.KeyCode == 13){
            this.btnClick();

        }
    }

    // 删除
    Delete(index){
        const list=[...this.state.list];
        list.splice(index,1);
        this.setState({
            list:list
        },()=>{
            window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
        });
    }


    // 修改
    Update(index){
        var rel=window.prompt('请输入新内容：');
        if(rel != null){
            this.state.list.splice(index,1,rel);
            this.setState({
                list:this.state.list
            },()=>{
                window.localStorage.setItem('myList',this.state.list);//把更新后的state数据更新到localStrong中
            });
        }

    }

    render(){
        return(
            <div>
                <div>
                    <input type="text" ref='input' onKeyDown={this.keyDown.bind(this)}></input>
                    <button onClick={this.btnClick.bind(this)} >添加</button>
                </div>
                <ul>
                    {this.state.list.map((item,index)=><li key={index}>
                        {item}
                        <button onClick={this.Delete.bind(this,index)}>删除</button>
                        <button onClick={this.Update.bind(this)}>修改</button>
                        </li>)}

                </ul>
            </div>
        )
    }
}
export default  Dolist