列表找房（三）01-下拉选项功能——展示和隐藏控制 & 确定按钮的事件处理程序 & 三元表达式确定样式

下拉选项功能——展示和隐藏控制 & 确定按钮的事件处理程序 & 三元表达式确定样式

• 展示和隐藏控制
  • 数据的控制逻辑统一在父组件Filter中进行处理
  • 按钮的事件行为在组件内部进行绑定 FilterFooter

{/* 前三个菜单的遮罩层 */}
{openType === 'area' || openType === 'mode' || openType === 'price' ? (
  <div className={styles.mask} onClick={this.onCancel} />
) : null}

{ (openType === 'area' || openType === 'mode' || openType === 'price') && <div className={styles.mask} />}

{/* 前三个菜单对应的内容： */}
{openType === 'area' ||
openType === 'mode' ||
openType === 'price' ? (
  <FilterPicker onSave={this.onSave} onCancel={this.onCancel} />
) : null}

{ (openType === 'area' || openType === 'mode' || openType === 'price') && <FilterPicker />}

// 关闭对话框
onCancel = () => {
  this.setState({
    openType: ''
  })
}
// 确定按钮的事件处理程序
onSave = () => {
  this.setState({
    openType: ''
  })
}

遮罩层-显示效果