React连系webpack案例——表格记事

React连系webpack完成表格记事

React官网有一个案例,完成表格的增加,我做一个比他庞杂一点,连系bootstrap的案例。分享给人人!

《React连系webpack案例——表格记事》

起首下载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")
);

搭建我们的目次构造

《React连系webpack案例——表格记事》

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;

人人如许就能够做出我们的增加表格结果!,有兴致的复制源码去试一试!

    原文作者:青石巷
    原文地址: https://segmentfault.com/a/1190000010385389
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞