react文档demo实现输入展示搜索结果列表
文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html
该文档只给了具体实现思路,下面是我实现的代码。
初学react,如果有写的不规范的地方,望大家多多指正!
FilterableProductTable (橙色): 包含了整个例子
SearchBar (蓝色): 接受所有的用户输入
ProductTable (绿色): 根据用户输入过滤并展示数据集合
ProductCategoryRow (绿松石色): 展示每个分类的标题
ProductRow (红色): 用行来展示每个产品
文档中清楚的为我们划分出了具体组件模块,各个组件实现如下:
App.js
import React from 'react';
import ReactDOM from 'react-dom'; import FilterableProductTable from './FilterableProductTable' ReactDOM.render(
<FilterableProductTable/>,
document.getElementById('root')
);
FilterableProductTable.js
import React from 'react'
import SearchBar from './SearchBar'
import ProductTable from './ProductTable' /*
* 需要定义的state或值:
*原产品列表
*用户输入的搜索文本
*复选框的值
* 需要根据以上值计算的值:
*产品的筛选列表
*/
const data=[
{category: "Sporting Goods", price: "$49.99", stocked: true, name: "Football"},
{category: "Sporting Goods", price: "$9.99", stocked: true, name: "Baseball"},
{category: "Sporting Goods", price: "$29.99", stocked: false, name: "Basketball"},
{category: "Electronics", price: "$99.99", stocked: true, name: "iPod Touch"},
{category: "Electronics", price: "$399.99", stocked: false, name: "iPhone 5"},
{category: "Electronics", price: "$199.99", stocked: true, name: "Nexus 7"}
];
class FilterableProductTable extends React.Component{
constructor(props){
super(props);
this.state = {
filterText: '',
inStockOnly: true,
list:data
};
this.handleSearch=this.handleSearch.bind(this);
this.handleCheckBox=this.handleCheckBox.bind(this);
}
handleSearch(keywods){
this.setState({
filterText:keywods
});
}
handleCheckBox(checkBoxStatus){
this.setState({
inStockOnly:checkBoxStatus
});
}
render(){
const filterText=this.state.filterText;
const inStockOnly=this.state.inStockOnly;
const list=this.state.list;
return(
<div>
<SearchBar
filterText={filterText}
inStockOnly={inStockOnly}
onSearch={this.handleSearch}
list={list}
onCheckBox={this.handleCheckBox}/>
<ProductTable
filterText={filterText}
inStockOnly={inStockOnly}
list={list}
/>
</div>
)
}
} export default FilterableProductTable
SearchBar.js:
import React from 'react' class SearchBar extends React.Component{
constructor(props){
super(props);
this.handleChange=this.handleChange.bind(this);
this.checkboxChange=this.checkboxChange.bind(this);
}
handleChange(e){
e.preventDefault();
let inputText=this.refs.inputText.value;
this.props.onSearch(inputText);
}
checkboxChange(e){
// let checkboxStatus=this.refs.checkbox.checked; 通过ref获取
let checkboxStatus=e.target.checked; //通过event.target事件获取
this.props.onCheckBox(checkboxStatus);
}
render(){
return(
<div>
<input type="text" ref='inputText' value={this.props.filterText} onChange={this.handleChange} placeholder="输入产品名称"/>
<div>
<input type="checkbox" ref="checkbox" checked={this.props.inStockOnly} onChange={this.checkboxChange}/>
仅仅展示有库存的商品
</div>
</div>
)
}
} export default SearchBar
ProductTable.js:
import React from 'react'
import ProductCategoryRow from './ProductCategoryRow'
import ProductRow from './ProductRow' class ProductTable extends React.Component{
/* constructor(props){
super(props);
}*/
render(){
let filterText=this.props.filterText;
let inStockOnly=this.props.inStockOnly;
let curCategory="";
return(
<table>
<thead>
<tr style={{fontWeight:'bold'}}>
<td>Name</td>
<td>Price</td>
</tr>
</thead>
{this.props.list.map((value,index) => {
let listItemShow;
if(value.name.toLowerCase().indexOf(filterText.toLowerCase())!==-1||filterText===''){
listItemShow=true;
if(inStockOnly===true&&value.stocked===true){
listItemShow=true;
}else if(inStockOnly===true&&value.stocked===false){
listItemShow=false;
}
}else{
listItemShow=false;
}
let categoryStatus=false;
if(value.category===curCategory){
categoryStatus=false;
}else{
categoryStatus=true;
}
curCategory=value.category;
return (
<tbody key={index}>
<ProductCategoryRow category={value.category} categoryStatus={categoryStatus}/>
<ProductRow
stocked={value.stocked}
name={value.name}
price={value.price}
show={listItemShow}/>
</tbody>
)
})
}
</table>
)
}
}
export default ProductTable
ProductCategoryRow.js
import React from 'react' class ProductCategoryRow extends React.Component{
/*constructor(props){
super(props);
}*/
render(){
let styleObj = {
display : this.props.categoryStatus ? 'block':'none',
fontWeight:"bold"
};
return(
<tr style={styleObj}>
<td>
{this.props.category}
</td>
</tr>
)
}
} export default ProductCategoryRow
ProductRow.js
import React from 'react' class ProductRow extends React.Component{
/*constructor(props){
super(props);
}*/
render(){
let styleObj = {
display : this.props.show ? 'block':'none',
};
return (
<tr style={styleObj}>
<td>
{this.props.name}
</td>
<td>
{this.props.price}
</td>
</tr>
)
}
} export default ProductRow
总结:react 的state要定义在几个组件的公共父组件上,这里定义在最外层的 FilterableProductTable.js 组件上,修改state 即setState也在定义state的组件上操作,所有修改的方法通过传入子组件,子组件通过props获得该方法,把改变之后的值传入父组件,即实现了父子组件数据的双向传递。
github源文件:https://github.com/beileixinqing/react-doc-demo-search
react文档demo实现输入展示搜索结果列表的更多相关文章
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- 快速实现office文档在线预览展示(doc,docx,xls,xlsx,ppt,pptx)
微软:https://view.officeapps.live.com/op/view.aspx?src=(输入你的文档在服务器中的地址):
- Java 处理word文档后在前端展示
最新新开发的这个项目需要使用word文档并要求能在前端页面上带格式展示,由于项目不是内部使用,所以不考虑插件类的处理模式,都必须要本地处理完成,前端不需要做什么更新或者说安装就能直接访问,类似于百度文 ...
- React文档(一)安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
- elasticsearch最全详细使用教程:入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解
一.快速入门1. 查看集群的健康状况http://localhost:9200/_cat http://localhost:9200/_cat/health?v 说明:v是用来要求在结果中返回表头 状 ...
- React文档(十)表单
HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...
- React文档(十六)refs和DOM
Refs 提供了一种方式,用于访问在 render 方法中创建的 DOM 节点或 React 元素. 在标准的React数据流中,props是使得父组件和子组件之间交互的唯一方式.你通过props重新 ...
- React文档(三)介绍JSX
我们先看看这个变量声明: const element = <h1>Hello, world!</h1>; 这个有趣的标签语法既不是字符串也不是HTML. 这种写法叫做JSX,这 ...
随机推荐
- python 生成动态密码
import stringimport randomdef gen_psd(length=10): """length is password length"& ...
- python之编程风格
第一:语句和语法 # 表示注释掉的内容 \ 续行 print("yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy\ yyyyyyyyyyyyyyyyyyyyy ...
- MiniUI破解方法
解决JQuery MiniUI前端库到期alert弹窗 MINIUI的到期提示是通过JS的Alert 方法弹出的. 那么我们可以不可以截获所有Alert方法,过滤文本.然后….你们懂得 我们只需要在页 ...
- 什么是ip代理
1.什么是代理IP(代理服务器),代理IP(代理服务器)有什么用? 代理服务器英文全称是(Proxy Server),也叫做代理IP,其功能就是代理网络用户去取得网络信息.形象的说:它是网络信息的中转 ...
- [Vuex] Split Vuex Store into Modules using TypeScript
When the Vuex store grows, it can have many mutations, actions and getters, belonging to different c ...
- 9 月份 GitHub 上最火的 JavaScript 开源项目!
推荐 GitHub 上9 月份最受欢迎的 10 个 JavaScript 开源项目,在这些项目中,你有在用或用过哪些呢? 1.基于 Promise 的 HTTP 客户端 Axios https://g ...
- 几种序列化协议(protobuf,xstream,jackjson,jdk,hessian)相关数据对比
测试结果 序列化数据对比 bytes字节数对比 具体的数字: protobuf jackson xstream Serializable hessian2 hessian2压缩 hessian1 ...
- 基于java实现的简单区块链
技术:maven3.0.5 + jdk1.8 概述 区块链是分布式数据存储.点对点传输.共识机制.加密算法等计算机技术的新型应用模式.所谓共识机制是区块链系统中实现不同节点之间建立信任.获取权益的 ...
- 基于cefsharp的用户浏览器
技术:vc++2015 概述 用于需要制作一个浏览器 winfrom 中浏览器的插件有很多种 如:WebBrowser , Web.kit等 但用于比较稳定 功能齐全的还是cefsharp 详细 ...
- Tomcat 部署多个项目出现错误
有时,我们会遇到部署同样项目可是不同版本号来回切换的问题.可是有时就是莫名奇异的会起不来. 也没太多时间去解决这些问题,所以就又一次把纯净版的Tomcat部署进去就能够了. 我想非常有可能就是Tomc ...