摘要：结合实现表格记事官网有一个案例，实现表格的添加，我做一个比他复杂一点，结合的案例。

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

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

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" }
  ]

测试通过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(
    ,
    document.getElementById("app")
);

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

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 (
      

      

      

      

        

          

              
DoTo你要做什么
              

          
          

          
               
                
            
 
          
     
    );
  }
}

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

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 
    })
    /* let todoItems=[
      ,
      ,
      ,
      ,
      
    ]; */
    return (
      

        
              {todoItems}
           

            

                

                    
内容
                    
时间
                    
状态
                    
操作
                
            
           

        
 
        
      
          
        
    );
  }
}

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

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 (
        
              {text}
              {time}
              {done==0?"未完成":"完成"}
              
                删除
                完成
              
        
    );
  }
}

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

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(
           

                

                    

                    
                    
                
  
                

                    添加
                
            
 
       );
   } 
}
export default DotoForm;

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