FilterPicker 组件（★★★）

思路分析

• 点击前三个标题展示该组件，点击取消的时候隐藏
• 使用PickerView组件来实现页面效果
• 获取到PickerView组件中，选中的筛选条件值
• 点击确定按钮，隐藏该组件，将获取到的筛选条件值传递给父组件
• 展示或隐藏对话框的状态：由父组件提供，通过props传递给子组件
• 筛选条件数据：由父组件提供（因为所有筛选条件是通过一个接口来获取的），通过props传递给子组件

使用步骤

定义openType，实现FilterPicker显示隐藏

• 在Filter组件中，提供组件展示或隐藏的状态：openType

  state = {...// 控制FilterPicker或 FilterMore组件的展示和隐藏openType: ""};

• 在render方法中判断 openType的值为 area/mode/price 时，就显示 FilterPicker组件，以及遮罩层

{/* 前三个菜单的遮罩层 */} 
{ openType === "area" || openType === "mode" || openType === "price" ? () : ("")}
...
{/* 前三个菜单对应的内容： */}
{openType === "area" || openType === "mode" || openType === "price" ? () : ("")}

• 在 onTitleClick方法中，修改状态 openType为当前 type，展示对话框

// 父元素提供子元素调用的函数
onTitleClick = type => {this.setState({titleSelectedStatus: {...titleSelectedStatus,[type]: true},openType: type});
};

• 在Filter组件中，提供onCancel方法（作为取消按钮和遮罩层的事件）

// 取消,
onCancel = () => {// 隐藏对话框this.setState({openType:''})
};

• 在onCancel方法中，修改状态 openType为空，隐藏对话框
• 讲onCancel通过props传递给FilterPicker组件，在取消按钮的单击事件中调用该方法
• 在Filter组件中，提供onSave方法，作为确定按钮的事件处理

// 在父组件 Filter中定义 确定和取消的函数
// 取消
onCancel = () => {// 隐藏对话框this.setState({openType: ""});
};
// 保存，隐藏对话框
onSave = () => {this.setState({openType: ""});
};
// 传递给FilterPicker
render(){return (...)
}// 在FilterPicker里面进行一次中转，最后这个按钮是在FilterFooter里面
render() {let { onCancel ,onSave} = this.props;return (<>{/* 选择器组件： */}{/* 底部按钮 */});
}// 在FilterFooter里面调用
function FilterFooter({cancelText = '取消',okText = '确定',onCancel,onOk,className
}) {return ({/* 取消按钮 */}{cancelText}{/* 确定按钮 */}{okText})
}

获取筛选条件数据

• 在Filter组件中，发送请求，获取所有筛选条件数据
• 将数据保存为状态：filtersData

// 获取筛选数据async getFilterData() {let { value } = JSON.parse(localStorage.getItem("localCity"));let res = await instance.get(`/houses/condition?id=${value}`);console.log(res);this.setState({filtersData: res.data.body});}

• 封装方法 renderFilterPicker 来渲染FilterPicker组件

// 渲染FilterPicker组件的方法renderFilterPicker() {const { openType } = this.state;if (openType !== "area" && openType !== "mode" && openType !== "price")return null;return ;}
render(){return (...{this.renderFilterPicker()})
}

• 在方法中，根据openType的类型，从filtersData中获取需要的数据
• 讲数据通过props传递给FilterPicker组件

// 渲染FilterPicker组件的方法renderFilterPicker() {const {openType,filtersData: { area, subway, rentType, price }} = this.state;if (openType !== "area" && openType !== "mode" && openType !== "price")return null;// 拼接数据let data = [];// pickerView显示的列数let cols = 3switch (openType) {case "area":// 区域数据data = [area, subway];break;case "mode":// 方式数据data = rentType;cols = 1break;case "price":// 租金数据data = price;cols =1break;}return ();}

• FilterPicker组件接收到数据后，讲其作为PickerView组件的data

export default class FilterPicker extends Component {render() {let { onCancel, onSave, data ,cols} = this.props;return (<>{/* 选择器组件： */}{/* 底部按钮 */});}
}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！