摘要:結合實現表格記事官網有一個案例,實現表格的添加,我做一個比他復雜一點,結合的案例。
React結合webpack實現表格記事
首先下載loader插件React官網有一個案例,實現表格的添加,我做一個比他復雜一點,結合bootstrap的案例。分享給大家!
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(搭建我們的目錄結構, document.getElementById("app") );
Dotobox.js作為我們的box,Dotolist,Dotos,DotoForm作為我們的模塊!
創建Dotobox.jsimport 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 (DotoLsit.js文件); } } //export {HelloWorld as default} export default Dotobox;
DoTo你要做什么
import React from "react"; import Dotos from "./Dotos" class DotoList extends React.Component{ render(){ let todos = this.props.data; let todoItems=todos.map(item=>{ returnDotos.js文件}) /* let todoItems=[ , , , , ]; */ return ( ); } } //export {HelloWorld as default} export default DotoList;
{todoItems} 內容 時間 狀態 操作
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 (DotoForm.js); } } //export {HelloWorld as default} export default Dotos; {text} {time} {done==0?"未完成":"完成"} 刪除 完成
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;
大家這樣就可以做出我們的添加表格效果!,有興趣的復制源碼去試一試!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84397.html
摘要:具體就不貼上來了,這里主要是利用采用的動態加載原理進行改造。首先,依賴與,所以最初的想法是采用結合的方式進行改寫。這個過程實際是是的動態加載。 dva現在是構建在umi基礎上,由于項目的原因,我并沒有采用umi架構,而是自己使用webpack4來進行打包,只用dva負責數據流的處理,dva原來的dynamic在webpack4上編譯會有一堆錯誤。具體就不貼上來了,這里主要是利用webp...
摘要:意味著字符串必須以結束。匹配不在方括號內的任意字符中轉義字符使用倒斜杠。你需要輸入轉義字符,才能打印出一個倒斜杠。但是,通過在字符串的第一個引號之前加上,可以將該字符串標記為原始字符串,它不包括轉義字符。 每個英語學渣(好吧,其實這個說的就是學渣本渣了♀)都有這樣一個夢想: 能夠一邊輕松愉快地看著美劇,一邊自己的英語聽力水平還能蹭蹭地往上漲 。知乎上也有很多人分享了自己通過美劇練習聽力...
摘要:搭建項目有三種安裝的方式,想了解的登錄官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于并實現一個小案例,留言功能官網的安裝教程安裝依次安裝最終啟動自后會出現一個頁面大家可以去試試下邊我們配置一 React-APP搭建項目 React有三種安裝的方式,想了解的登錄React官網查看,今天介紹的一個自動安裝的不需要怎么配置環境,自動生成的方式,類似于vue-cl...
閱讀 1644·2021-11-24 09:39
閱讀 3083·2021-11-22 15:24
閱讀 3091·2021-10-26 09:51
閱讀 3276·2021-10-19 11:46
閱讀 2891·2019-08-30 15:44
閱讀 2217·2019-08-29 15:30
閱讀 2537·2019-08-29 15:05
閱讀 773·2019-08-29 10:55