react实现
目录结构
index.js
var React = require('react'),ReactDOM = require('react-dom'),App = require('./App/index.js'),Todo = require('./to-do/index'); require('./index.css'); ReactDOM.render( <Todo />,document.getElementById('root') );
todo文件下的index.js
import React from 'react' import TodoList from './to-do-list' function id() { return Math.random().toString().replace(/\./,'')+'-'+Math.random().toString().replace(/\./,'') } var TodoMVC = React.createClass({ getinitialState:function () { return { items : [ {text:'aaa',id:id(),type:'active'},{text:'bbb',type:'no-active'},{text:'ccc',id:id()} ],value:'inp' } },render:function () { return ( <div className="todo-mvc"> <h3>todos</h3> <p> <input value={this.state.value} onChange={this.handleChange}/> <button onClick={this.handleAdd}>提交</button> </p> <TodoList items={this.state.items} onDelete={this.handleDelete} onEdit={this.handleEdit} /> </div> ) },handleEdit:function (obj) { alert(obj.text) var items = this.state.items; items = items.map(function (o) { console.log(obj.id,o.id) if(o.id == obj.id){ o.text = obj.text } return o }) console.log(items) this.setState({items:items}) },handleDelete:function (obj) { var items = this.state.items,json = [] for(var i=0;i<items.length;i++){ if(items[i].id != obj.id){ json.push(items[i]) } } this.setState({items:json}) },handleAdd:function () { var items = this.state.items,text = this.state.value items.push({ text:text,id:id() }) this.setState({ items:items,value : '' }) },handleChange:function (e) { this.setState({ value:e.target.value }) } }) module.exports = TodoMVC
todo文件下的to-do-list文件里的index
import React from 'react' var TodoItem = React.createClass({ getinitialState:function () { return { value : this.props.text } },render:function () { return ( <li> {this.props.text}<button onClick={(e)=>this.props.delete(this.props.o)}>删除</button><br/> <input value={this.state.value} onChange={this.handleChange}/> <button onClick={this.handleEdit}>确定</button> <button onClick={this.handeCancel}>取消</button> <br/><br/> </li> ) },handeCancel:function () { this.setState({ value:this.props.text }) },handleChange:function (e) { this.setState({ value:e.target.value }) },handleEdit:function () { var obj = { id:this.props.id,text:this.state.value } this.props.edit(obj) } }) var TodoList = React.createClass({ render:function () { var that = this var nodes = this.props.items.map(function (o) { return ( <TodoItem id={o.id} edit={that.props.onEdit} o={o} key={o.id} text={o.text} delete={that.props.onDelete}/> ) }) return ( <ul>{nodes}</ul> ) } }) module.exports = TodoList
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。