react - 官方搜索列表案例

// 搜索框
class SearchBar extends React.Component {
  constructor (props) {
    super(props)

    this.handleChangeInput = this.handleChangeInput.bind(this)
    this.handleChangeCheckBox = this.handleChangeCheckBox.bind(this)

    this.searchInput = React.createRef()
    this.checkBoxRef = React.createRef()
  }

  handleChangeInput () {
    this.props.onInputChange(this.searchInput.current.value)
  }

  handleChangeCheckBox () {
    this.props.onCheckBoxChange(this.checkBoxRef.current.checked)
  }

  render () {
    return (
      

        

          this.searchInput} value={this.props.searchKeyWord} onChange={this.handleChangeInput} />
        
        

          this.checkBoxRef} type="checkBox" checked={ this.props.isChecked } onChange={this.handleChangeCheckBox} /> 是否有库存
        
      
    )
  }
  
}

// 显示分类标题的组件
function ProductCategoryRow (props) {
  return (
    

      
{props.title}
    
  )
}

// 产品的每一行
class ProductRow extends React.Component {
  constructor (props) {
    super(props)
  }

  render () {
    return (
      

        {this.props.name}
        {this.props.price}
        {this.props.isChecked}
      
    )
  }
}

// 产品的列表
class ProductTable extends React.Component {
  constructor (props) {
    super(props)
  }

  // 处理数据分组
  groupDatas (keyWord, isChecked) {
    let obj = {}
    this.props.productDatas.forEach((item) => {
      if (item.name.includes(keyWord) && item.stocked === isChecked) {
        if (obj[item.category]) {
          obj[item.category].push(item)
        }else {
          obj[item.category] = [item]
        }
      }
    })
    return obj
  }
  
  render() {
    const datas = this.groupDatas(this.props.searchKeyWord, this.props.isChecked)
    console.log(datas, "分组数据", this.props.productDatas)

    const content = Object.keys(datas).map((val, index) =>
      

         
        {
          datas[val].map((item, i) => )
        }
      
    )
    
    return (
      

        {
          content
        }
      
    );
  }
}

class FilterableProductTable extends React.Component {
  constructor (props) {
    super(props)

    this.onInputChange = this.onInputChange.bind(this)
    this.onCheckBoxChange = this.onCheckBoxChange.bind(this)

    this.state = {
      searchKeyWord: '',
      isChecked: true,
      productDatas: []
    }
  }

  // 输入框输入触发事件
  onInputChange (searchKeyWord) {
    this.setState({
      searchKeyWord: searchKeyWord
    })
  }

  // 复选框勾选触发
  onCheckBoxChange (isChecked) {
    this.setState({
      isChecked: isChecked
    })
  }

  componentDidMount () {
    setTimeout(() => {
      let res = [
        {category: "国产", price: "$49.99", stocked: true, name: "华为"},
        {category: "国产", price: "$9.99", stocked: true, name: "中兴"},
        {category: "国产", price: "$29.99", stocked: false, name: "荣耀"},
        {category: "海外", price: "$99.99", stocked: true, name: "苹果"},
        {category: "海外", price: "$399.99", stocked: false, name: "黑莓"},
        {category: "海外", price: "$199.99", stocked: true, name: "索尼"}
      ]
      this.setState(() => ({
        productDatas: res
       })
      )
    }, 1000) 
  }

  render () {
    return (
      

        this.state.isChecked } searchKeyWord = {this.state.searchKeyWord} onInputChange = {this.onInputChange} onCheckBoxChange = {this.onCheckBoxChange} />
        {
          this.state.productDatas.length > 0 &&  
          this.state.isChecked } searchKeyWord = {this.state.searchKeyWord} productDatas = { this.state.productDatas } />
        }
      
    )
  }
}

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

// 19. 案例
// 搜索框 class SearchBar extends React.Component {   constructor (props) {     super(props)
    this.handleChangeInput = this.handleChangeInput.bind(this)     this.handleChangeCheckBox = this.handleChangeCheckBox.bind(this)
    this.searchInput = React.createRef()     this.checkBoxRef = React.createRef()   }
  handleChangeInput () {     this.props.onInputChange(this.searchInput.current.value)   }
  handleChangeCheckBox () {     this.props.onCheckBoxChange(this.checkBoxRef.current.checked)   }
  render () {     return (       <div>         <div>           <input ref={this.searchInput} value={this.props.searchKeyWord} onChange={this.handleChangeInput} />         div>         <div>           <input ref={this.checkBoxRef} type="checkBox" checked={ this.props.isChecked } onChange={this.handleChangeCheckBox} /> 是否有库存         div>       div>     )   }    }
// 显示分类标题的组件 function ProductCategoryRow (props) {   return (     <div>       <h5>{props.title}h5>     div>   ) }
// 产品的每一行 class ProductRow extends React.Component {   constructor (props) {     super(props)   }
  render () {     return (       <div>         <span>{this.props.name}span>         <span>{this.props.price}span>         <span>{this.props.isChecked}span>       div>     )   } }
// 产品的列表 class ProductTable extends React.Component {   constructor (props) {     super(props)   }
  // 处理数据分组   groupDatas (keyWord, isChecked) {     let obj = {}     this.props.productDatas.forEach((item) => {       if (item.name.includes(keyWord) && item.stocked === isChecked) {         if (obj[item.category]) {           obj[item.category].push(item)         }else {           obj[item.category] = [item]         }       }     })     return obj   }      render() {     const datas = this.groupDatas(this.props.searchKeyWord, this.props.isChecked)     console.log(datas, "分组数据", this.props.productDatas)
    const content = Object.keys(datas).map((val, index) =>       <div key={index}>         <ProductCategoryRow title={val} key={index} />          {           datas[val].map((item, i) => <ProductRow key={i} name={item.name} price={item.price} isChecked = {item.stocked} />)         }       div>     )          return (       <div>         {           content         }       div>     );   } }
class FilterableProductTable extends React.Component {   constructor (props) {     super(props)
    this.onInputChange = this.onInputChange.bind(this)     this.onCheckBoxChange = this.onCheckBoxChange.bind(this)
    this.state = {       searchKeyWord: '',       isChecked: true,       productDatas: []     }   }
  // 输入框输入触发事件   onInputChange (searchKeyWord) {     this.setState({       searchKeyWord: searchKeyWord     })   }
  // 复选框勾选触发   onCheckBoxChange (isChecked) {     this.setState({       isChecked: isChecked     })   }
  componentDidMount () {     setTimeout(() => {       let res = [         {category: "国产", price: "$49.99", stocked: true, name: "华为"},         {category: "国产", price: "$9.99", stocked: true, name: "中兴"},         {category: "国产", price: "$29.99", stocked: false, name: "荣耀"},         {category: "海外", price: "$99.99", stocked: true, name: "苹果"},         {category: "海外", price: "$399.99", stocked: false, name: "黑莓"},         {category: "海外", price: "$199.99", stocked: true, name: "索尼"}       ]       this.setState(() => ({         productDatas: res        })       )     }, 1000)    }
  render () {     return (       <div>         <SearchBar isChecked = { this.state.isChecked } searchKeyWord = {this.state.searchKeyWord} onInputChange = {this.onInputChange} onCheckBoxChange = {this.onCheckBoxChange} />         {           this.state.productDatas.length > 0 &&             <ProductTable isChecked = { this.state.isChecked } searchKeyWord = {this.state.searchKeyWord} productDatas = { this.state.productDatas } />         }       div>     )   } }
ReactDOM.render(   <FilterableProductTable />,   document.getElementById('root') )