接React结合webpack配置!
制作一个简单的表格
TodoApp.js里的代码
import React from 'react'; import TodoList from './TodoList'; import TodoForm from './TodoForm'; class TodoApp extends React.Component{ constructor(props){ super(props);
this.ids=1; this.state={ todos:[] }; this.addItem=this.addItem.bind(this); this.deleteItem=this.deleteItem.bind(this); this.okItem=this.okItem.bind(this);
} okItem(id){ this.state.todos.map(item=>{ if(item.id==id){ item.done=1; } return item; }); this.setState({ todos:this.state.todos }); } deleteItem(id){ let newtodos=this.state.todos.filter((item)=>{ return !(item.id==id) }); this.setState({ todos:newtodos }); } addItem(value){ this.state.todos.unshift( { id:this.ids++,text:value,time:(new Date()).toLocaleString(),done:0 } ) this.setState({ todos:this.state.todos }); } render(){ return (
<div className="container"> <div className="panel panel-default"> <div className="panel-headingbg-danger"> <h1 className="text-center ">ToDo <small>学习学习</small></h1> <hr/> </div> <div className="panel-body"> <TodoForm addItem={this.addItem}/> <TodoList okItem={this.okItem} deleteItem={this.deleteItem} data={this.state.todos}/> </div> </div> </div> ); } } export default TodoApp;
使用bootstrap先配置文件
cnpm file-loader url url-loader --save-dev
-
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,loader: "file-loader" },{ test: /\.(woff|woff2)$/,loader:"url-loader?prefix=font/&limit=5000" },{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,loader: "url-loader?limit=10000&mimetype=application/octet-stream" },{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,loader: "url-loader?limit=10000&mimetype=image/svg+xml" }
index.js
import React from 'react'; import ReactDOM from 'react-dom'; import TodoAPP from './components/TodoAPP'; //引用文件 import './lib/bootstrap/css/bootstrap.min.css'; ReactDOM.render(<TodoAPP/>,document.getElementById("app"));
TodoForm.js
import React from 'react';
class TodoForm extends React.Component{ tijiao(event){ event.preventDefault(); } add(event){ if(event.type=="keyup"&&event.keyCode!=13){ return false; } let txt=this.refs.txt.value; if(txt=="") return false; this.props.addItem(txt);
this.refs.txt.value=""; } render(){ return( <form className="form-horizontal" onSubmit={this.tijiao.bind(this)}> <div className="form-group"> <div className="col-sm-10"> <input ref="txt" type="text" className="form-control" onKeyUp={this.add.bind(this)} id="exampleInputName2" placeholder="请输入内容"/> </div> <div className="col-sm-2"> <button type="button" className="btn btn-primary" onClick={this.add.bind(this)}>添加</button> </div> </div> </form> ); } } export default TodoForm;
TodoItem.js
import React from 'react'; class TodoItem extends React.Component{ delete(){ this.props.deleteItem(this.props.data.id); } complete(){ console.log(this); this.props.okItem(this.props.data.id); } render(){
let {text,time,done,id}=this.props.data; return ( <tr> <td>{text}</td> <td>{time}</td> <td>{done==0?"未完成":"完成"}</td> <td> <a className="btn btn-primary" onClick={this.delete.bind(this)}>删除</a> <a className="btn btn-success" onClick={this.complete.bind(this)}> <span className="glyphicon glyphicon-ok" aria-hidden="true"></span> 完成 </a> </td> </tr> ); } } export default TodoItem;
TodoList.js
import React from 'react'; import TodoItem from './TodoItem'; class TodoList extends React.Component{ render(){ let todos=this.props.data; let todoItems=todos.map(item=>{ return <TodoItem okItem={this.props.okItem} deleteItem={this.props.deleteItem} key={item.id} data={item}/> }); /*let todoItems=[ <TodoItem/>,<TodoItem/>,<TodoItem/> ];*/
return ( <table className="table table-striped"> <thead> <tr> <th>内容</th> <th>时间</th> <th>状态</th> <th>操作</th> </tr> </thead> <tbody> {todoItems} </tbody> </table>
); } } export default TodoList;
这就是一个简单表格的完整代码,接下来看下效果图