07.React实现Todolist练习（上）

最新推荐文章于 2020-03-31 11:07:48 发布

weixin_33670713

最新推荐文章于 2020-03-31 11:07:48 发布

阅读量95

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/glorylion/blog/3000940

版权

2019独角兽企业重金招聘Python工程师标准>>>

一.效果图

目标效果图

本章完成效果图

完整代码

import React  from 'react';

class Home extends React.Component {
    constructor(){

        super();  // 用在构造函数中，必须在使用this之前调用

        this.state = {                
            name:'张三',
            value:'我是一个表单'
        } 
    }
    run=(event)=>{
        // console.log()
        event.target.style.background="red"

        alert( event.target.getAttribute('id'))
    }

    setData=(event)=>{

       
        console.log(event);


        this.setState({

            name: event.target.value
        })
        
    }

    getData=()=>{

        // alert(this.state.name)


        alert(this.refs.msg.value);
    }

    keydown(e){
        console.log(e.keyCode);

        if(e.keyCode==13){
            alert('回车'+e.target.value);
        }

    }

    inputChage=(event)=>{
        
        this.setState({
            value: event.target.value

        })

    }

    render() {

        
        return (
            <div>

                


                <button id='btn' onClick={this.run}>执行事件</button>

                <br />
                <br />

                 <input type="text" onChange={this.setData} />

                 <br />
                 <br />


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

                 <button onClick={this.getData}>获取input的值</button>
                 <br />
                 <br />

                <input type="text" onKeyDown={this.keydown} />

                <br />
                 <br />


                {/* 双休数据绑定 */}


                <input type="text" value={this.state.value} onChange={this.inputChage} />

                {this.state.value}
                

                

            </div>
        );
    }
}

export default Home;

完整代码

import React  from 'react';

class TodoList extends React.Component{

    constructor(){

        super();  // 用在构造函数中，必须在使用this之前调用

        this.state = {                
         
            username:'',
            list: [

                {
                  title: '录制nodejs',
                  checked: true
                },
                {
                  title: '录制ionic',
                  checked: false
                },
                {
                    title: '录制nodejs11',
                    checked: true
                },
                {
                    title: '录制ionic1',
                    checked: false
                }
            ]
        } 
    }
    addData=()=>{
        // alert(this.refs.username.value);

        var temp=this.state.list;  /*获取list的值*/

        temp.push(this.refs.username.value);

        this.setState({  /*改变数据*/
            list:temp
        })

    }        
    removeData=(key)=>{

        // alert(key)
        var temp=this.state.list;  /*获取list的值*/

        temp.splice(key,1);

         this.setState({  /*重新复制*/
            list:temp
        })
        


    }


    checkboxChange=(key,checked)=>{


        console.log(key,checked)

        var list=this.state.list;


        list[key].checked=!checked;


        this.setState({

            list:list
        })

    }

    render() {

        
        return (
            <div>

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

                    <button onClick={this.addData}>+增加</button>

                    <br />

                    <hr />

                    <br />
                    <h2>进行中</h2>
                    <ul>
                        {

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

                                if(value.checked){
                                    return(

                                    
                                        <li key={key}>

                                            <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)}/>
                                        
                                            {value.title}  
                                            
                                            
                                            ----- <button onClick={this.removeData.bind(this,key)}>删除</button> 
                                            
                                        
                                        </li>


                                        
                                    )
                                }

                            })
                        }
                    </ul>



                    <h2>已完成</h2>
                    <ul>
                        {

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

                                if(!value.checked){
                                    return(

                                    
                                        <li key={key}>

                                            <input type="checkbox" checked={value.checked} onChange={this.checkboxChange.bind(this,key,value.checked)}/>
                                        
                                            {value.title}  
                                            
                                            
                                            ----- <button onClick={this.removeData.bind(this,key)}>删除</button> 
                                            
                                        
                                        </li>                                        
                                    )
                                }

                            })
                        }
                    </ul>


                              

            </div>
        );
    }



}

export default TodoList;

转载于:https://my.oschina.net/glorylion/blog/3000940