摘要：結(jié)合實現(xiàn)表格記事官網(wǎng)有一個案例，實現(xiàn)表格的添加，我做一個比他復雜一點，結(jié)合的案例。

React官網(wǎng)有一個案例，實現(xiàn)表格的添加，我做一個比他復雜一點，結(jié)合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}
           

            

                

                    
內(nèi)容
                    
時間
                    
狀態(tài)
                    
操作
                
            
           

        
 
        
      
          
        
    );
  }
}

//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;

大家這樣就可以做出我們的添加表格效果！，有興趣的復制源碼去試一試！