制作一个简单的表格

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 (

下面的代码是表格最基本的排版内容：可以参考网站：


                          
                     
                              
       ToDo 学习学习
                        
       
                
      
                
                                                      
                                
                        
        
       
      
            
     
         
    
              );    } }export default TodoApp;

使用bootstrap先配置文件

cnpm file-loader url url-loader --save-dev

再webpack.config.js文件里添加

{ 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(
    ,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(     
            
                         
                      
                   
      
            
              
                   
      
                
     
        
    
        );    }}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 (          {text}       {time}       {done==0?"未完成":"完成"}                  删除                                            完成                          );}}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 
    
         });    /*let todoItems=[                
     ,                
     ,                
     ,                
     ,                
     ,                
         ];*/

return (        
    
                      {todoItems}            
                                                                  内容                            时间                            状态                            操作