[JavaScript] 纯文本查看 复制代码
import React, { Component } from 'react';
import { addBook, queryBook,deleteBook,checkAdd,checkRemove,checkClear,checkAll,fetchData } from "./actions/action"
import { connect } from 'react-redux';
import BookItem from "./components/BookItem";
import logo from './logo.svg';
//App作为容器组件
class App extends Component {
constructor(props) {
super(props);
this.saveBook = this.saveBook.bind(this);
this.queryBook_ = this.queryBook_.bind(this);
}
componentDidMount() {
this.props.searchData();
}
saveBook(){
const book = {
id:this.id.value,
name:this.name.value,
author:this.author.value,
price:this.price.value
};
this.props.saveBook(book)
}
queryBook_(name){
if(name == "ALL"){
this.props.queryBook("");
}else{
this.props.queryBook(this.search.value);
}
}
render() {
let { dispatch,bookList,checkIds,checkAdd,checkRemove,deleteBook } = this.props;
return (
....
<form className="navbar-form navbar-left">
<div className="form-group">
<input type="text" ref={(search)=>{this.search = search}} className="form-control" placeholder="Search" />
</div>
<button type="button" className="btn btn-default" onClick={this.queryBook_}>Submit</button>
</form>
....
<button type="button" onClick={()=>{ this.id.value="";this.name.value="";this.author.value="";this.price.value="" }} className="btn btn-default" data-toggle="modal" data-target="#myModal">新增</button>
<button type="button" className="btn btn-default" onClick={this.queryBook_.bind(this,"ALL")}>刷新</button>
<button type="button" className="btn btn-default" onClick={()=>{ deleteBook(checkIds) }}>删除</button>
....
<table className="table table-striped">
<thead>
<th></th>
<th>#</th>
<th>书名</th>
<th>作者</th>
<th>价格</th>
</thead>
<tbody>
{ bookList.map(item => <BookItem item={item} checkAdd={checkAdd} checkRemove={checkRemove}/>) }
</tbody>
</table>
....
<form className="form-horizontal" role="form">
<input type="text" ref={(id) => {this.id = id}} className="form-control" id="id" placeholder="请输入id" />
<input type="text" ref={(name) => {this.name = name}} className="form-control" id="lastname" placeholder="请输入书名" />
<input type="text" ref={(author) => {this.author = author}} className="form-control" id="lastname" placeholder="请输入作者" />
<input type="number" ref={(price) => {this.price = price}} className="form-control" id="lastname" placeholder="请输入价格" />
<button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.saveBook}>提交保存</button>
</form>
....
);
}
}
//条件过滤
const bookFilter = (bookList ,filter)=>{
console.log(filter);
return bookList.filter(item => item.name.indexOf(filter)!=-1);
}
//绑定state数据到容器组件的prop属性
const mapStateToProps = (state) => {
return {
//state.bookListState 数据列表
//state.bookQueryState 过滤条件
bookList: bookFilter(state.bookListState,state.bookQueryState),
checkIds: state.bookDeleteState
}
};
//绑定dispatcher到容器组件的prop属性
const mapDispatchToProps = (dispatch,ownProps) => {
return {
searchData:()=>{
dispatch(fetchData());
},
saveBook:(book)=>{
dispatch(addBook(book));
},
queryBook:(value)=>{
dispatch(queryBook(value));
},
deleteBook:(ids)=>{
dispatch(deleteBook(ids));
},
checkAdd: (id) => {
dispatch(checkAdd(id));
},
checkRemove: (id) => {
dispatch(checkRemove(id+""));
},
checkClear: () => {
dispatch(checkClear());
},
checkAll: () => {
dispatch(checkAll());
}
};
}
//将绑定后的prop属性连接到容器组件
export default connect(mapStateToProps,mapDispatchToProps)(App);
