最近做了一个基于 Antd Pro 的项目，记录一下遇到的问题。
1.Select 组件中通过 dropdownRender 在额外元素上加的 onClick()事件为什么不生效？
方案：阻止默认的 onMouseDown 事件。
<Select
defaultValue="lucy"
dropdownRender={(ReactNode, props) => (
<div
onMouseDown={e => {
e.preventDefault()
return false
}}
>
{ReactNode}
<Divider style= />
<div
style=
onClick={() => {
console.log('Add item onClick()...')
}}
>
<Icon type="plus" /> Add item
</div>
</div>
)}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</Select>
2.如何调用子组件(由 Form 构成)内的方法？
方案：wrappedComponentRef 和 withRef。
父组件
<UserForm
wrappedComponentRef={f => {
if (f) {
this.UserForm = f.props.form
this.UserFormComp = f.getWrappedInstance()
}
}}
/>
子组件
import React from 'react';
import { connect } from 'dva';
import { Form } from 'antd';
@Form.create()
@connect(
() => ({}),
null,
null,
{ withRef: true }
)
export default class UserForm extends React.Component {
...
}
3.如何跨 Model 调用 effects，state？
方案：dvajs 文档
effects 调用
yield put({ type: 'a/foo' });
yield put({ type: 'b/bar' });
state 调用
// 获取user模块的state->currentUser
const currentUser = yield select(state => state.user.currentUser);
// 获取user模块的所有state
const { user } = yield select();