列表找房（七）-筛选弹窗控制标签选中状态——解构数组- [...valueList] & 不存在就添加-arr.push(v)

列表找房-筛选弹窗控制标签选中状态——解构数组- […valueList] & 不存在就添加-arr.push(v)

筛选第四个按钮弹窗效果-数据填充

  // 数据填充
  case 'more':
    data = {roomType, oriented, floor, characteristic}
    break;
    
  { openType === 'more' && <FilterMore data={data} onCancel={this.handleClose} />}

  renderFilters(data) {
    // 高亮类名： styles.tagActive
    return data.map(item => (
      <span key={item.value} className={[styles.tag].join(' ')}>
        {item.label}
      </span>
    ))
  }

<dl className={styles.dl}>
  <dt className={styles.dt}>户型</dt>
  <dd className={styles.dd}>{this.renderFilters(roomType)}</dd>
  <dt className={styles.dt}>朝向</dt>
  <dd className={styles.dd}>{this.renderFilters(oriented)}</dd>
  <dt className={styles.dt}>楼层</dt>
  <dd className={styles.dd}>{this.renderFilters(floor)}</dd>
  <dt className={styles.dt}>房屋亮点</dt>
  <dd className={styles.dd}>{this.renderFilters(characteristic)}</dd>
</dl>

• 筛选第四个按钮弹窗效果-选中值和标签高亮控制

  state = {
    // 选中值数组
    selectedValues: []
  }

  // 标签的单击事件
 toggleSelect = (v) => {
     console.log(v)
  // 控制标签的选中与否
  let arr = [...this.state.selectedValue]
  // 判断原有数组中是否包含当前值，如果包含就删除，如果不包含就添加
  if (arr.includes(v)) {
    // 存在就删除
    let index = arr.findIndex(item => {
      return item === v
    })
    arr.splice(index, 1)
  } else {
    // 不存在就添加
    arr.push(v)
  }
  // 整体更新数组
  this.setState({
    selectedValue: arr
  }, () => {
      console.log(this.state.selectedValue)
  })
}

打印参数-菜单选项值 v

高亮效果

// 渲染标签
renderFilters(data) {
  // 高亮类名： styles.tagActive
  return data.map((item, index) => (
    <span 
      onClick={() => {this.toggleSelect(item.value)}}
      key={index} 
      className={[styles.tag, this.state.selectedValue.includes(item.value)? styles.tagActive: ''].join(' ')}>
      东北
    </span>
  ))
}

打印选中菜单内容-this.state.selectedValue

逻辑：包含就通过类名，进行高亮显示