【Ant Design Pro】子组件向父组件传参

写在前面
最近开始用Antdesign Pro写后台, 习惯了用vue, 一下子真的很难习惯过来~ 何况这框架还集成了umi/dva/redux/react… 一系列技术栈, 写起来真是有点头大~!
那就浅浅记录下使用过程中的一些point吧~

子组件向父组件传参

父组件 parent.js ↓

  return (
    <Page inner>
      <div className={styles.editorWrap}>
      	// 和vue一样, 向子组件传入事件
        <TextEditor onChangeText={onChangeText} className={styles.editor} />
        </div>
      </div>
    </Page>
  )

  // 定义事件
  const onChangeText = e => {
	console.log(e.val,'获取从子组件事件中传过来的参数')
  }

子组件 child.js ↓

import PropTypes from 'prop-types'

// 接收父组件传过来的方法 onChangeText
const TextEditor = ({ onChangeText, dispatch }) => {
  const getText = val => {
  	// 通过onChangeText传参
    onChangeText({ val })
  }

  return (
    <div>
      <div style={{ border: '1px solid #ccc', zIndex: 100 }}>
        <Editor
          onChange={editor => getText(editor.getHtml())}
        />
      </div>
    </div>
  )
}

// 定义prop类型
TextEditor.propTypes = {
  onChangeText: PropTypes.func,
  dispatch: PropTypes.func,
}