react 哲学_React哲学案例练习

1.Object.assign()用法讲解：
https://blog.csdn.net/Calla_Lj/article/details/894787652.React Context(上下文) 作用和使用：
https://www.jianshu.com/p/65b348bf86ad3.浅谈react context：
https://segmentfault.com/a/11900000202179264.react Portals:
https://reactjs.bootcss.com/docs/portals.html

toString()不常用用法：

//使用radix进制把number数字转换为字符串
number.toString(radix);

React哲学案例练习：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

class ProductCategoryRow extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        var category = this.props.category;
        return (
            '2'>{category}
        )
    }
}

        class ProductRow extends React.Component{
            constructor(props){
                super(props);
            }

            render(){
                var productName = this.props.productName;
                var productPrice = this.props.productPrice;
                return (
                    {productName}{productPrice}
                )
            }
        }

        class ProductTable extends React.Component{
            constructor(props){
                super(props);
            }

            render(){
                var filter = this.props.filterText;
                var inStockOnly = this.props.inStockOnly;
                var stockData = this.props.productData;
                if(!stockData){
                    return Loading...
                } else {
                    let sportList = [];
                    let elecList = [];
                    var conditional = '';
                    if (filter === ''){
                        conditional = true;
                    }
                    stockData.map((item)=>{
                        if(conditional){
                            if(item.category === 'Sporting Goods'){
                                sportList.push(item);
                            } else {
                                elecList.push(item);
                            }
                        } else if((item.name.indexOf(filter) !== -1) && (item.stocked === inStockOnly)){
                            if(item.category === 'Sporting Goods'){
                                sportList.push(item);
                            } else {
                                elecList.push(item);
                            }
                        }
                    })

                    const sports = sportList.map((element,index)=>
                        
                    )

                    const elects = elecList.map((element,index)=>
                        
                    )

                    return(
                        'Sporting Goods'/>
                            {sports}'Electronics'/>
                            {elects}
                    )
                }
            }
        }

        class SearchBar extends React.Component{
            constructor(props){
                super(props);
                this.handleEnterKey = this.handleEnterKey.bind(this);
                this.handleClick = this.handleClick.bind(this);
            }

            handleEnterKey = (e) =>{
                if(e.nativeEvent.keyCode === 13){   //e.nativeEvent获取原生的事件对象
                    var filterText = this.search.value;
                    this.props.filter(filterText);
                }
            }

            handleClick(){
                var inStock = this.checkbox.checked;
                this.props.check(inStock);
            }

            render(){
                return (
                    

'text' placeholder='Search...' onKeyPress={this.handleEnterKey} ref={ref => this.search = ref}/>'checkbox' id='stockCheck' onClick={this.handleClick} ref={ref => this.checkbox = ref}/>'stockCheck'>Only show productPrices in stock


                )
            }
        }

        class FilterableProductTable extends React.Component{
            constructor(props){
                super(props);
                this.state = {stockData:'',filterText:'',inStockOnly:false};
                this.getFilter = this.getFilter.bind(this);
                this.getChecked = this.getChecked.bind(this);
            }

            componentDidMount(){
                const _this = this;      //先存一下this,以防止使用箭头函数this会指向不希望它所指向的对象
                axios.get('http://localhost:3000/api/stockProduct.json').then((res) => {
                    const refreshData = res.data;
                    _this.setState({
                        stockData: refreshData
                    })
                }).catch(function(error){
                    console.log(error);
                    _this.setState({stockData: []})
                });
            }

            getFilter(filter){
                this.setState({
                    filterText: filter 
                })
            }

            getChecked(inStock){
                this.setState({
                    inStockOnly: inStock 
                })
            }

            render(){
                return (
                    

'searchBar' filter={this.getFilter} check={this.getChecked}/> NamePricethis.state.stockData} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly}/>


                )
            }
        }

        ReactDOM.render(
            ,
            document.getElementById('root')
        )