React结合webpack案例——表格记事

React结合webpack实现表格记事

React官网有一个案例，实现表格的添加，我做一个比他复杂一点，结合bootstrap的案例。分享给大家！

首先下载loader插件

npm file-loader url url-loader --save-dev

配置webpack配置文件

rules: [
     {test: /\.js$/, exclude: /node_modules/, loader: "react-hot-loader!babel-loader"},
     {test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader"},
     { 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" }
  ]

引入bootstrap模块

测试通过npm包下载bootstrap文件有坑，我们手动下载，安装在css目录下，引用它！我们中引入了一些bootstrap样式！

import './css/bootstrap/css/bootstrap.min.css';

配置接口文件

'use strict'
import React from 'react';
import ReactDOM from 'react-dom';
import Dotobox from './components/Dotobox';
import './css/bootstrap/css/bootstrap.min.css';

ReactDOM.render(
    <Dotobox/>,
    document.getElementById("app")
);

搭建我们的目录结构

Dotobox.js作为我们的box，Dotolist,Dotos，DotoForm作为我们的模块！

创建Dotobox.js

import React from 'react';
import DotoList from './DotoList';
import DotoForm from "./DotoForm"

class Dotobox extends React.Component{
  constructor(props){
    
    super(props);
    this.ids=1;
    this.state={
      todos:[]
  };
  this.addItem=this.addItem.bind(this);
  this.deleItem=this.deleItem.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
  })
}
deleItem(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">
      <br/>
      <br/>
      <br/>
        <div className="panel panel-default">
          <div className="panel-heading-danger">
              <h1 className="text-center bg-warning">DoTo<small>你要做什么</small></h1>
              <hr/>
          </div>
          <div className="panel-body">
          
               <DotoForm addItem={this.addItem}/>
               <DotoList okItem={this.okItem} deleItem={this.deleItem} data={this.state.todos}/> 
            </div> 
          </div>
     </div>
    );
  }
}

//export  {HelloWorld as default}
export default Dotobox;

DotoLsit.js文件

import React from 'react';
import Dotos from './Dotos'

class DotoList extends React.Component{
  render(){
    let todos = this.props.data;
    let todoItems=todos.map(item=>{
      return <Dotos okItem={this.props.okItem} deleItem={this.props.deleItem} key={item.id} data={item}/>
    })
    /* let todoItems=[
      <Dotos/>,
      <Dotos/>,
      <Dotos/>,
      <Dotos/>,
      <Dotos/>
    ]; */
    return (
      <div>
        <table className="table table-striped">
            <thead>
                <tr>
                    <th>内容</th>
                    <th>时间</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
           <tbody>
              {todoItems}
           </tbody>
        </table> 
        
      </div>
          
        
    );
  }
}

//export  {HelloWorld as default}
export default DotoList;

Dotos.js文件

import React from 'react';

class Dotos extends React.Component{
  delete(){
    this.props.deleItem(this.props.data.id)
  }
  complete(){
    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)}>完成</a>
              </td>
        </tr>
    );
  }
}

//export  {HelloWorld as default}
export default Dotos;

DotoForm.js

import React from 'react';

class DotoForm extends React.Component{
tijiao(event){
    event.preventDefault();
}
add(event){
    if(event.type=="keyup"&&event.keyCode!=13){
        event.preventDefault();
        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-horizontar" 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="inputEmail3" placeholder="请输入你要添加的事件"/>
                    </div>
                </div>  
                <div className="col-sm-2">
                    <button type="button" className="btn btn-primary" onClick={this.add.bind(this)}>添加</button>
                </div>
            </form> 
       );
   } 
}
export default DotoForm;

大家这样就可以做出我们的添加表格效果！，有兴趣的复制源码去试一试！