随笔- 77 文章- 1 评论- 0 阅读- 71874

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 (
      <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')
)

// 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')
)