列表找房（八）-筛选弹窗控制清除按钮操作 & 筛选弹窗控制确定按钮操作 & 筛选弹窗处理默认值状态

列表找房-筛选弹窗控制清除按钮操作 & 筛选弹窗控制确定按钮操作 & 筛选弹窗处理默认值状态

• 筛选第四个按钮弹窗效果-清除与确定按钮

  // 渲染 FilterMore 组件
  renderFilterMore() {
    const {
      openType,
      filtersData: { roomType, oriented, floor, characteristic }
    } = this.state

    if (openType !== 'more') {
      return null
    }
    // 组装数据
    const data = {
      roomType,
      oriented,
      floor,
      characteristic
    }
    return (
      <FilterMore
        openType={openType}
        data={data}
        onSave={this.onSave}
      />
    )
  }

const {
  data: { roomType, oriented, floor, characteristic },
  onSave,
  onCancel,
  openType
} = this.props

{/* 底部按钮 */}
<FilterFooter
  className={styles.footer}
  btnText="清除"
  onCancel={() => this.setState({ selectedValues: [] })}
  onSave={() => onSave(menuValue, type)}
/>

• 筛选第四个按钮弹窗效果-默认选中值

// 当前选中值
const defaultValue = selectedValues.more
return (
  <FilterMore
    defaultValue={defaultValue}
    type={openType}
    data={data}
    onSave={this.onSave}
    onCancel={this.onCancel}
  />
)

state = {
    // 选中值数组
    selectedValues: this.props.defaultValue || []
}

筛选条件默认值-defaultValue