onRef父子组件关联
- 子组件调用父组件的方法
子组件：
<Button onClick = {this.props.deleteItem}>清空内容</Button>
父组件：
<Children deleteItem={this.deleteValue}></Children>
注意：父组件传递的函数名和子组件通过this.props接收的函数名称需要一直
- 父组件调用子组件方法 -onRef
过程：1、在组件内部定义onRef方法，接收ref，方法内部将ref绑定到this.child上；2、在子组件上以onRef函数名向子组件传递onRef方法 3、父组件内部定义需要调用的子组件中介方法clearChildValue，在其内部调用this.child上传递过来的方法
父组件：
子组件上先在componentDidMount上处理父组件传递过来的onRef方法this.props.onRef(this)将自身的this传递过去，this对应父组件onRef方法是ref形参，完成这个动作相当于把子组件的this通过onRef函数传递给了父组件的this.child，此时，子组件上所有传递给父组件的方法deleteValue不需要暴露，可直接在父组件上通过this.child进行调用
子组件
注意，如果有多个子组件：
child是自己随便写的 多个子组件你可以
onRef = (ref) => {
this.child = ref;
}
onRefDate = (ref) => {
this.childDate = ref;
}
工作中遇到的案例：
/**
* 关联更新子组件
*/
updateRef = (ref) =>{
this.updateChild = ref;
}
参考文档：https://www.jianshu.com/p/ff1420118918
删除方法加入confirm处理
import { Modal } from 'antd'
const { confirm } = Modal;
删除方法中使用：
confirm({
title: '确定要删除课件?',
okText: '确定',
cancelText: '取消',
// 点击确定之后的处理逻辑
onOk:()=>{
console.log(formValues)
// 处理只剩下一个值的情况---> 如果第二页请求数据唯一一个值被删除则发起请求跳转到第二页中
if(coursewareObj.records.length === 1 && formValues.current !== undefined && formValues.current !== 1){
values.current -= 1;
this.setState({
formValues: { ...values },
})
}
dispatch({
type: 'courseware/deleteCourseware',
payload: coursewareId,
// callback: () => {
// // 单个删除的回调函数是否需要清空选中行？----不可以也不需要
// 单个删除之后是否需要从选中行中删除掉已经删除的行Key值--->不删除的情况下也不影响后续请求
// this.setState({
// selectedRows: [],
// });
// },
}).then(() => {
dispatch({
type: 'courseware/fetch',
// 将此时查询表格中的参数带过去一同请求
payload: { ...values }, // 直接使用formValues属性扩散之后在对象内传过去即可，不需要另外赋值
// payload:{...formValues}
});
});
},
// 点击取消之后的处理逻辑
onCancel() {},
});
列表标签上的render值处理
{
title: '资讯类别',
dataIndex: 'cateType',
className: styles.centerAlign,
render: val => val === 0
? '监管动态'
: val === 1
? '政策法规'
: val === 2
? '曝光辟谣'
: val === 3
? '抽检公告'
: val === 4
? '行业动态'
: val === 5
? '食品专题'
: val === 6
? '餐饮专题'
: val === 7
? '饮食养生'
: '-',
},
和：
{
title: '资讯状态',
dataIndex: 'infoStatus',
className: styles.centerAlign,
render: val => val === 0 ? (
<Tag color="green">已发布</Tag>
) : val === 1 ? (
<Tag color="red">待发布</Tag>
) : (
'-'
),
},
还有：
{
title: '操作',
dataIndex: 'action',
className: styles.centerAlign,
render: (text, record) =>
record.infoStatus === 0 ? (
<Fragment>
<a style={{ opacity: '0.2' }}>发布</a>
<Divider type="vertical" />
<a onClick={() => this.handleRecall(record.infoId)}>撤回</a>
<Divider type="vertical" />
<a onClick={() => this.handleDelete(record.infoId)}>删除</a>
<Divider type="vertical" />
<a onClick={() => this.handleUpdate(record.infoId)}>编辑</a>
</Fragment>
) : (
<Fragment>
<a onClick={() => this.handlePush(record.infoId)}>发布</a>
<Divider type="vertical" />
<a style={{ opacity: '0.2' }}>撤回</a>
<Divider type="vertical" />
<a onClick={() => this.handleDelete(record.infoId)}>删除</a>
<Divider type="vertical" />
<a onClick={() => this.handleUpdate(record.infoId)}>编辑</a>
</Fragment>
),
},
组件之间隐藏显示的逻辑处理
return (
<PageHeaderWrapper title="资讯管理">
{create === false &&
modalVisibleNewsInfo === false &&
update === false? (
<Card>
。。。省略主页面组件书写
</Card>
) : create === true ? (
<Card bordered={false}>
{create && <CreateNews modalVisible={create} {...createHandle} onRef={this.createRef} />}
</Card>
) : update === true ? (
<Card bordered={false}>
{update && <UpdateNew modalVisible={update} {...updateHandle} onRef={this.updateRef} /> }
</Card>
):(
<Card bordered={false}>
{modalVisibleNewsInfo && (
<DetailNews modalVisible={modalVisibleNewsInfo} {...detailHandle} />
)}
</Card>
)}
</PageHeaderWrapper>
);
