React 例子1

最新推荐文章于 2024-11-07 09:56:14 发布

今天也很棒棒~

最新推荐文章于 2024-11-07 09:56:14 发布

阅读量229

点赞数

分类专栏： React 文章标签： react.js 前端 reactjs

本文链接：https://blog.csdn.net/qq_39233028/article/details/121212447

版权

React 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

1.输入框中：回车自动增加到待办事项

2.待办事项中：勾选方框自动增加到已办事项

3.已完成事项：取消勾选自动增加到待办事项

待办事项：checked：false；已完成事项：checked：true

1.回车增加待办事项

addData=(e)=>{
        if(e.keyCode==13){
            var temp=this.state.list ;
        temp.push({
            title:this.refs.title.value ,
            checked: false
        });
        this.refs.title.value='' ;
        this.setState({
            list : temp
        })
        }
    }

<header className='title'> Todolist  
                <input ref="title"  onKeyUp={this.addData}></input> </header>

                <h2>待办事项</h2>
                <hr/>
                <ul>
                {
                    this.state.list.map( (value,key)=>{
                        if(!value.checked){
                            return(
                                <li>
                                <input type='checkbox' checked={value.checked}  />
                                {value.title}
                                ------<button >删除</button>
                                </li>                                
                            )
                        }
                    })
                }
                </ul>

2.3.勾选-取消勾选

checkboxChange=(key)=>{
        let temp=this.state.list ;
        temp[key].checked=! temp[key].checked
        this.setState({
            list : temp
        })
    }

<ul>
                {
                    this.state.list.map( (value,key)=>{
                        if(!value.checked){
                            return(
                                <li>
                                <input type='checkbox' checked={value.checked}  onChange= 
                                   {this.checkboxChange.bind(this,key)}/>
                                {value.title}
                                ------<button >删除</button>
                                </li>                                
                            )
                        }
                    })
                }
                </ul>