React结合Bootstrap的使用
Bootstrap大家应该都不陌生吧，它是一套用于HTML、CSS 和JS的框架，这里，我们要使用它里面的一套样式框架；
搭建环境
- 首先我们需要去官网下载一个Bootstrap库
官网网址： http://v3.bootcss.com/getting-started/#download 直接在浏览器打开就可以，打开以后会出现以下页面，点击第一个，下载Bootstrap就可以；
- 然后安装Bootstrap插件
在命令行里输入 npm install file-loader url url-loader --save-dev
- 配置webpack.config.js文件
module.exports = {
entry: './index.js',output: {
path:path.resolve(__dirname,"build"),publicPath:"/assets/",filename: 'bundle.js'
},module: {
rules: [
{ test: /\.js$/,exclude: /node_modules/,loader: "react-hot-loader!babel-loader" },{ test: /\.css$/,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" } //添加
]
}
}
这样我们的环境就搭建完成了；
一个简单的小例子
我做了一个用React和Bootstarp的一个例子，一个提交的表格，下面我来给大家详细的介绍一下：
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8">
<title>React3</title>
</head>
<body>
<div id="app"></div>
<script src="/assets/bundle.js"></script>
</body>
</html>
- 创建ToDoapp.js文件，它将作为一个最大的模块来包三个模块
import React模块 from 'react'; //导入React模块
import ToDoList from './ToDoList'; //导入ToDoList模块
import ToDoForm from './ToDoForm'; //导入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 (
<div className="container">
<br/>
<br/>
<br/>
<div className="panel panel-default">
<div className="panel-headingbg-danger">
<h1 className="text-center ">ToDo<small>你要做什么？</small></h1>
<hr/>
</div>
<div className="panel-body">
<ToDoForm addItem={this.addItem}/>
<ToDoList okItem={this.okItem} deleteItem={this.deleteItem} data={this.state.todos}/>
</div>
</div>
</div>
);
}
}
export default ToDoapp; //导出ToDoapp模块
- 创建ToDoList.js文件
import React from 'react';
import ToDoItem from './ToDoItem'; //导入ToDoItem模块
class ToDoList extends React.Component{
render(){
let todos=this.props.data;
let todoItems=todos.map(item=>{
return <ToDoItem okItem={this.props.okItem} deleteItem={this.props.deleteItem} key={item.id} data={item}/>
});
return (
<table className="table table-striped">
<thead>
<tr>
<th>内容</th>
<th>时间</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{todoItems}
</tbody>
</table>
);
}
}
export default ToDoList; //导出ToDoList模块
- 创建ToDoItem.js文件
import React from 'react';
class ToDoItem extends React.Component{
delete(){
this.props.deleteItem(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)}>
<span className="glyphicon glyphicon-ok" aria-hidden="true"></span>
完成
</a>
</td>
</tr>
);
}
}
export default ToDoItem; //导出ToDoItem模块
- 创建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(
<form className="form-horizontal" 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="exampleInputName2" placeholder="请输入内容"/>
</div>
<div className="col-sm-2">
<button type="button" className="btn btn-primary" onClick={this.add.bind(this)}>添加</button>
</div>
</div>
</form>
);
}
}
export default ToDoForm; //导出ToDoForm模块
这里我们能用到了栅格化布局；
接下来就让我们来看一下效果吧：
原文链接：https://www.f2er.com/react/303387.html
