共计 2392 个字符,预计需要花费 6 分钟才能阅读完成。
需要:
- 抉择大厦,把抉择完大厦 id 传给楼层下拉列表,抉择大厦申请楼层列表,相互可搜寻
- 大厦没有配置楼层时,做校验
问题
新增编辑时只传抉择完的楼层 id,编辑回显后盾给 2 个 id,select 封装成 form 表单子组件应用问题。
解决
form 表单父组件
if (key === "floor_ids") {
return (
<Form.Item label="所在地区" className="panel-li-title">
{getFieldDecorator(`floor_ids`, {
// 无用值 为了展现数据
initialValue: {},
rules: [
{
required: true,
message: "",
},
],
})(
// 所在地区大厦和楼层的组件
<FloorSelect2
form={form}
// 编辑的时候 拿到了 data 中 后盾返回大厦和楼层的 id 传给子组件
data={data}
></FloorSelect2>
)}
</Form.Item>
);
}
select 子组件
1. 初始化定义两个数组,buildList 大厦列表 floorList 楼层列表
state = {
// 所在地区逻辑批改
buildList: [], // 大厦列表
floorList: [], // 楼层列表};
2. 定义个申请大厦列表的函数
// 这是楼层的 change 办法
componentDidMount() {this.init();
}
init = () => {
// 获取大厦列表
FloorguideAction.floorGuideMeetingBuildList({}).then((results) => {console.log(results);
let {data = [] } = results;
if (!results.success) {message.error("接口谬误", 0.5);
return;
}
this.setState({buildList: data,});
});
};
-
render 中遍历 buildList 数据渲染到大厦下拉框中
<Form.Item> {/* 拿到大厦 id 这是传递的 key*/} {getFieldDecorator(`build_id`, { // 这是默认值 initialValue: data.build_id, rules: [ { required: true, message: "大厦不能为空", }, ], })( <Select style={{ minWidth: "3.3rem", width: "3.3rem", marginRight: "0.12rem", }} onChange={(value) => { setFieldsValue({floor_id: void 0,}); // 在切换抉择大厦时,把抉择完的大厦 id 传给了楼层申请接口的函数这样就能带过来这个 id this.getFloorList(value); // 在抉择大厦时,革除掉楼层的数据 }} placeholder="请抉择大厦" showSearch filterOption={(input, option) => option.props.children .toLowerCase() .indexOf(input.toLowerCase()) >= 0 } > {buildList.map((item, index) => (<Option key={index} value={item.id}> {item.cn_name} </Option> ))} </Select> )} </Form.Item>
4. 定义一个楼层申请接口的函数 并赋值
// 楼层列表
getFloorList = (id) => {MeetingAction.floorList({ id}).then((results) => {let { data = [] } = results;
if (!results.success) {message.error("接口谬误", 0.5);
return;
}
this.setState({floorList: data,});
});
};
5.render 中楼层渲染数据
<Form.Item style={{width: “100%”}}>
{getFieldDecorator(`floor_id`, {
// 这个 data 是从父组件传递过去的,data 是编辑时候返显的 data 数据,initialValue 代表默认值 在编辑的时候回显数据应用的
initialValue: data.floor_id,
rules: [
{
required: true,
message: "未配置楼层",
},
],
})(
<Select
style={{
flexGrow: 1,
width: "100%",
}}
placeholder="请抉择楼层"
showSearch
filterOption={(input, option) =>
option.props.children
.toLowerCase()
.indexOf(input.toLowerCase()) >= 0
}
>
{floorList.map((item, index) => (<Option key={item.id} value={item.id}>
{item.cn_name}
</Option>
))}
</Select>
)}
</Form.Item>
componentDidUpdate(prevProps, prevState) {if (!_.isEqual(prevProps.data, this.props.data)) {let { build_id} = this.props.data;
// 这个是在页面刷新就更新的生命周期函数,因为大厦列表的函数在 init 的时候更新的,楼层是基于切换抉择大厦列表才申请的接口,所以大厦列表更新了 这个申请没有更新导致只展现 id 所以在这个刷新就更新 state 的生命周期函数里更新一下这个申请函数
this.getFloorList(build_id);
}
}
正文完