1.页面的跳转携带参数的问题
我的页面很多都会进行页面的跳转,而下一个页面的信息都是跟上页面相关联的,及时我跳转的页面所需要的信息,在跳转前的页面都是存在的,所以我第一个想的方法就是在跳转路由的时候,通过传参的方式,进行数据的传递,所以我是用了location中的state来存储我传的数据.
const data=record;
const path = {
pathname:'/person/releaseDetial',
state:{data},
这样传递的数据,我直接在新的页面通过this.props.history.location中把他取出来,这样传递数据,虽然确实可以在新的页面拿到并且进行渲染,但是问题是,如果进行刷新,我的数据将会丢失,只能返回上一页,重新进入.所以这里的修改,采用拼接URL的方式.因为刷新不会改变的是路由的地址,所以我们采用跳转路由通过拼接URL的方式,然后通过解析路由,在新页面进行数据的请求.
const {id}=record;
than.props.dispatch(routerRedux.push({
pathname:`/person/druginfo/edit/${id}`,
}))
router.js里面配置路由使这么写
'/person/druginfo/:type/:id':{
component:dynamicWrapper(app, ['personrelease'], ()=>import('../routes/Person/PersonRelease/ReleaseInfo')), },
在新的页面进行解析路由,拿到我们需要的id,然后在本页面进行数据请求
const pathToRegexp=require('path-to-regexp');
const match=pathToRegexp('/person/druginfo/:type/:id').exec(this.props.history.location.pathname)
this.props.dispatch({
type:'persondrug/getBase',
payload:{idCard:match[2],
},
});
2.父子组件之间的信息交流
子调父
父组件一般是向子组件传递数据,然后子组件拿到数据进行自己页面的一个渲染,但是更多时候,我们需要将一些函数一起传给子组件,比如:弹出一个Modal进行数据的填写,然后关闭Model的这个操作我们需要父组件来控制,但是这个确定按钮又是在子组件里面.这时候我们就需要将此类的函数向子组件传递.还有一种函数叫做回调函数,父组件什么时候需要传递回调函数给子组件呢,当父组件需要子组件的一些数据的时候,比如我们填好数据,点击确定的时候将填写好的数据返回给父组件,最终由父组件向后台发送请求.
父控子
首先得明确一个问题，作为子组件一般我们不会再给他绑定model，因为我们遵守React的一个思想，就是一个Container，其余都是用作展示组件的component。而所谓的展示组件，就是他只接受数据和函数，而不进行相关的处理
① 父组件如何给子组件传值和函数
②子组件如何返回数据给父组件
③如果我需要通过父组件来控制子组件的某些功能，怎么才能使用子组件的函数
父传子代码如下
在父组件我们要给子组件传递一个函数，用ref来绑定子组件
parentprops:{
title:'新增其他人员',
isVisible:false,
list:{},
name:'',
handleCancel:()=>
{
this.props.dispatch({
type:'otherpeople/changeVisibal',
payload:{isVisible:false},
})
},
onRef:(ref)=>{
this.ModalForm=ref
},
seachIdCard:(idCard)=>
{
this.props.dispatch({
type:'otherpeople/getBase',
payload:{
idCard,
},
});
},
onRef :(ref) => {
this.ModalForm = ref
},
然后在子组建的componentDidMount里面绑定this
componentDidMount(){
this.props.parentprops.onRef(this)
}
然后就在父组件里调用子组件的函数
用法如下：
this.ModalForm.check()
3异步加载的antd Tree组件，设置了 defaultExpandAll 为true但是不起作用
应该是类似value和defaultValue的相似问题，而这个里defaultExpandAllRows
就是像defaultValue那样 只在第一次渲染的时候起作用
而很多时候我们的数据初始是空的
4.DatePick
// 限制可选日期范围为，今天以前的日期不可选（今天仍可选）
disabledDate={
function disabledDate(current) {
// Can not select days before today
return current && current.isBefore(moment(Date.now()).add(-1,'day'));
}
}
开始日期，结束日期
style={{width:'100%' }} format="YYYY-MM-DD" disabledDate={currentDate => getFieldValue('validToDate') && moment(getFieldValue('validToDate')).isBefore(currentDate,'day') }/> style={{width:'100%' }} format={dateFormat} disabledDate={currentDate => getFieldValue('validFromDate') && moment(getFieldValue('validFromDate')).isAfter(currentDate,'day') }/> 5.关于回传数据（lov,select等等组件） const {form } =this.props; 从lov的点击事件获取数据后如要放到表单中，某些字段需要初始化一下（getFieldDecorator）再setFieldsValue，否则会报警告 setFieldsValue if (data) { form.getFieldDecorator('materialId'); form.setFieldsValue({ nameZh: data.nameZh, nameEn: data.nameEn, materialTypeCode: data.materialTypeCode, materialId: data.materialId, }); } 6.Modal中的initialValue 1.当我们第一次点开Modal的时候， FormItem会得到一个initialValue,但是这个值只在组件挂载的时候执行了一次， 当我们再次打开Modal窗口的时候并不会更新。 好了发现问题所在了， 接下来就是解决了~ 解决方法： Modal窗口我们都有应用一个Visible来控制是否显示， 我们只要利用这个值得变化就可以实现Modal组件的重新挂载了。 { Visible&& } 7.Table组件rowSelection方法 在 组件中有 rowSelection={rowSelection} 方法，可以让Table的第一列成为联动的选择框。
API中说到通过 rowSelection.selectedRowKeys 来控制选中项。比较坑的是，selectedRowKeys 控制的只是dataSource当前的顺序编号。
一定要加上rowKey={record => record.id}，唯一标识每一行的字段（可组合），且 selectedRowKeys 存的就是id才能正常显示勾选状态。后来经过多次调试发现很多BUG都跟一个参数有关，不然会导致联动的选择框状态异常。
onSelectChange(selectedRowKeys,selectedRows) {
const {handelSelectRow}=this.props;
handelSelectRow(selectedRows);
this.setState({
selectedRowKeys:selectedRows.map(r=>r.num),
});
}
rowSelection={{ selectedRowKeys, onChange:this.onSelectChange, }} columns={columns} dataSource={dataSource} bordered loading={loading} scroll={{x:1600}} pagination={pagination} onChange={page=>onSearch(page)} rowKey="num" 8.select下拉选择器点击时带出多个数据 通常的select选择器会点击函数onSelect上只会带出key和value，当是由于客户需求，点击时需要带出其他数据。 我用dataRef={数据集合}把数据放到节点上。很多其他类似的情况都可以这么干。 queryFuzzyData({requestUrl,data}).then(result=>{ if(currentValue===value&&result) { constres=[]; result.content.forEach(r=>{ res.push({ materialId:r.materialId, nameZh:r.nameZh, materialTypeCode:r.materialTypeCode, salesUnit:r.packSize, }); }); callback(res); } }); const options=data.map(d=> showSearch value={value} defaultActiveFirstOption={false} showArrow={showArrow} filterOption={filterOption} onSearch={this.handleSearch} onChange={this.handleChange} onSelect={onSelect} notFoundContent={null} > {options} handelSelect(data,option) { const{form}=this.props; const{dataref}=option.props; if(dataref) { form.getFieldDecorator('materialId'); form.setFieldsValue({ nameZh:dataref.nameZh, materialTypeCode:dataref.materialTypeCode, materialId:dataref.materialId, salesUnit:dataref.salesUnit, skuNum:dataref.skuNum, }); } } 9.正确使用setState react官方文档中这样介绍setState的 setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. setState不会立即修改this.state,也就是说我们在调用setState的后，立即访问this.state是不能取得最新的this.state的值的。这样在一些特殊需求的时候可能会出现问题。但是我们可以通过使用setState回调函数的形式来使下面的代码拿到最新的this.state的值。 updateState({target}) { this.setState(prevState=>{ const updatedUser={...prevState.user, [target.name]:target.value};// 使用先前的state来构建新的state的值 doSomething(updatedUser); return{user:updatedUser}; }); } 10.React-router-dom 路由切换时，如何触发 componentDidMount？ 描述： 在react 项目中我们获取远程数据总是会放在 componentDidMount 里面做的。但是这样的话只有在组件初始化的时候才会调用。 而有些路由类似于： 然后我们有一些 用于跳转的 。。。componentDidMount(){const{ match,handleAjaxItem } =this.props; handleAjaxItem(match.params.id); } render(){const{ item } =this.props;return( 首次进入页面例如 detail/123 的时候是没问题，但往后切换到 detail/456 ，就不再走componentDidMount 了 解决方案有两个： 1.componentWillReceiveProps，每次在这个函数做this.props和nextProps的相等判断然后就可以调用想要调用的方法啦，但是（好像官网不推荐这么干了） 2.问题的本质是为我们这两个路由页面对应的都是一个detail组件，只要用key将组件加以区分，这样react 就会知道这不是‘同一个组件’，于是会重新初始化，componentDidMount当然会再走一遍。我的方法是用函数把组件包装一下 例如 // 这是正常的导出组件 exportdefaultDetail; // 用函数包装一下变成这样 exportdefaultfunction(props) { return }