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,这 ...
随机推荐
- [P1373]小a和uim之大逃离 (DP)
[题目链接] 模拟赛的时候的一道题 因为老师不小心把数据发下来了……我考试打表的 考完之后Orz xzjds 然后开始打正解 题意 大概就是两个人,走矩阵,两个人各加上走上的矩阵的数值,要求最终两个人 ...
- CallContext,ThreadStatic,AsyncLocal<T>,ThreadLocal<T>,学习笔记
1.CallContext 在当前调用上下文的线程数据槽里存储对象 2.ThreadStatic 是一个特性 3.AsyncLocal<T> 是一个类型,该字段应当为static,保证单例 ...
- 单元测试-unittest
一.简介 unittest单元测试框架可组织执行测试用例,并且提供了丰富的断言方法,判断测试用例是否通过,最终生成测试结果. 二.属性介绍 1.unittest模块的各个属性 unittest.Tes ...
- bootstrap常见的面试题
1. 如果让一个元素在pc端显示而在手机端隐藏,下列选项正确的是(b). A. visible-xs-8 hidden-md B. visible-md-8 hidden-xs C. visibl ...
- GMA Round 1 数列求单项
传送门 数列求单项 在数列{$a_n$}中,$a_1=-\frac{1}{4}$,$\frac{1}{a_{n+1}}+\frac{1}{a_n}=\begin{cases}-3(n为偶数)\\3(n ...
- IIS7常见错误及解决方法
IIS7常见错误及解决方法 问题一:HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相关配置数据无效. 详细错误信息模块 IIS We ...
- Unity游戏开发图片纹理压缩方案
Unity3D引擎对纹理的处理是智能的:不论你放入的是PNG,PSD还是TGA,它们都会被自动转换成Unity自己的Texture2D格式. 在Texture2D的设置选项中,你可以针对不同的平台,设 ...
- JSOUP 请求JSON
JSOUP请求JSON Document doc = Jsoup .connect(Constant.DATA_URL) .header("Accept", "*/*&q ...
- 配置gitlab通过smtp发送邮件
1. 编辑/etc/gitlab/gitlab.rb文件(加到文件最后面就好了,或者通过搜索找到,新版已有这些配置,只不过都是被注释掉了).以QQ企业邮箱为例: gitlab_rails['smtp_ ...
- iOS:类似于网易云音乐的刷新条目显示弹框
一.介绍 在app中使用刷新控件或者第三方刷新库是最常见的功能,在请求服务器时,获取数据的过程是处于不可见状态的,那么通过这个刷新状态可以给用户以直观的感受,这是增强用户体验的一个相当好的方法.我个人 ...