ToDoList

使用react实现简单的ToDoList小demo（有小bug）

首先 它是这样的！:

• 进入页面，将光标聚焦在输入框中，输入完毕点击确认

  
  首先

• 点击事件前的复选框，会在该事件上出现删除线

  
  然后

• 点击“x”即可删除该事件

  
  最后

然后，组件安排是这样的! ：

组件安排示意

接着，代码实现是这样的！：

• 首先是页面的初步成形：

//todosApp.js
render() {
        return (
            <div className="container">
                <Title/>
                <TodosInput onTransmit={this.printThings.bind(this)}/>
                <ThingList things={this.state.things} onDeleteThing={this.handleDeleteThing.bind(this)}/>
            </div>
        )
    }

//todosInput.js
render() {
        return (
            <div>
                <div className="thingInput">
                    <input type="text" value={this.state.thing}
                                       onChange={this.getThing.bind(this)}
                                       ref={(inputThings)=>this.input = inputThings}/>
                    <button onClick={this.onSubmit.bind(this)}>确定</button>
                </div>
            </div>

        )
    }

//thingList.js
render() {
        return (
            <div className="thingsList">
               {this.props.things.map((thing, i) => <Thing thing={thing}
                                                           key={i} index={i}
                                                           onDeleteThing={this.handleDeleteThing.bind(this)}/>)}
            </div>
        );
    }

//thing.js
render(){

        return(
            <div className="thing">
                <input type="checkbox" onClick={this.changeSpan.bind(this)} />
                <span ref={(span)=>this.span=span} >{this.props.thing.thing}</span>
                <button className="delete" onClick={this.handleDelete.bind(this)}>X</button>
            </div>
        )
    }

• 接着是输入之后按钮及事件的显示处理
  • 在 input中添加onChange事件，通过event.target.value来获取到输入框中的值，并且存储在state中
  • 通过button中的onClick将state中的值传入父组件即todosApp
  • 在父组件中使用state对事件进行存储，并且存入localStorge保证刷新之后数据仍旧存在
  • 在ThingList组件通过属性thing将state中的事件传入thinglist组件
  • 在thinglist.js中使用map函数将每一个事件传入thing组件中进行渲染
• 然后就是事件删除处理
  • 首先在thing.js中对删除“X”按钮添加点击事件，调用父组件即thinglist传入的属性
  • 然后在thinglist.js中对每一个Thing组件记录index值，并且设置属性onDeleteThing绑定函数调用父组件即todosApp组件
  • 最后在todosApp.js中对ThingList组件设置属性，调用函数，使用splice对index相对应的函数进行删除
• 最后就是点击复选框出现删除线
  • 首先在thing.js中设置state，记录复选框的点击情况，以及通过ref获取到span元素
  • 根据state中的值，对span设置样式名，『当点击时，设置为具有删除线样式的样式名，反之』

最后，它存在的问题是这样的！！！！

• 当第一个事件增加删除线之后并删除后，删除线的样式会追加在第二个事件上

总之，友情链接，先pia上代码地址https://github.com/heheyuanqing/reactDemo/tree/master/todolist