列表找房-筛选弹窗控制清除按钮操作 & 筛选弹窗控制确定按钮操作 & 筛选弹窗处理默认值状态
- 筛选第四个按钮弹窗效果-清除与确定按钮
// 渲染 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