- ---------------------可爱的分割线---------------------------------------
- 以下JS文件和CSS文件请自行替换,product.json文件里的数据如下:
- [{
- "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": true,
- "name": "Basketball"
- },
- {
- "category": "Electronics Goods",
- "price": "$99.99",
- "stocked": false,
- "name": "iPod Touch"
- },
- {
- "category": "Electronics Goods",
- "price": "$399.99",
- "stocked": true,
- "name": "iPhone 5"
- },
- {
- "category": "Electronics Goods",
- "price": "$199.99",
- "stocked": false,
- "name": "Nexus 7"
- },
- {
- "category": "PC Goods",
- "price": "$39.99",
- "stocked": false,
- "name": "IBM x2005"
- },
- {
- "category": "PC Goods",
- "price": "$19.99",
- "stocked": false,
- "name": "IBM x2008"
- }]
- ---------------------可爱的分割线---------------------------------------
- body{
- font-family:"microsoft yahei";
- padding:20px;
- }
- var Product = React.createClass({
- getInitialState:function(){
- return ({data:[],onlyStocked:false,filterWord:""})
- },
- componentDidMount:function(){
- $.ajax({
- url:this.props.url,
- dataType:"json",
- success:function(data){
- this.setState({data:data});
- }.bind(this),
- error:function(xhr,status,err){
- console.error(this.props.url,status,err.toString());
- }.bind(this)
- })
- },
- onlyStock:function(bool){
- this.setState({onlyStocked:bool});
- },
- handleFilter:function(word){
- this.setState({filterWord:word});
- },
- render:function(){
- return (
- )
- }
- });
- var SearchBox = React.createClass({
- handleChange:function(e){
- this.props.onlyStocked(e.target.checked);
- },
- handleInput:function(e){
- this.props.sendFilter(e.target.value);
- },
- render:function(){
- return (
- Only show products in stock
- )
- }
- });
- var ProductList = React.createClass({
- render:function(){
- var nowCategory = "";
- var listDetails =[];
- var onlyStock = this.props.onlyStock;
- var filterWord = this.props.filter;
- this.props.data.map(function(value){
- if(value.category!==nowCategory){
- if(onlyStock){
- if(value.stocked){
- listDetails.push(
- )
- listDetails.push(
- )
- nowCategory=value.category;
- }
- }else{
- listDetails.push(
- )
- listDetails.push(
- )
- nowCategory=value.category;
- }
- }
- else{
- if(onlyStock){
- if(value.stocked){
- listDetails.push(
- )
- }
- }else{
- listDetails.push(
- )
- }
- }
- });
- return (
- namePrice
- {listDetails}
- )
- }
- });
- var CategoryTable = React.createClass({
- render:function(){
- return (
- {this.props.product.category}
- )
- }
- });
- var ListTable = React.createClass({
- render:function(){
- if(this.props.filter){
- if(this.props.product.name.toLowerCase().indexOf(this.props.filter.toLowerCase())!==-1){
- return(
- {this.props.product.name}{this.props.product.price}
- )
- }else{
- return null;
- }
- }else{
- return(
- {this.props.product.name}{this.props.product.price}
- )
- }
- }
- });
- ReactDOM.render(,document.getElementById("container"));
来源: http://www.bubuko.com/infodetail-1983195.html