React父组件使用子组件数据

TypeScript语言。
子组件TopBar.tsx:

import React, {createContext} from 'react';
import {FormInstance} from "antd/lib/form";

const formRef = React.createRef<FormInstance>();
export const TopBarContext = createContext(formRef);

  return (
    <Form
      form={form1}
      ref={formRef}
      name="topBarForm"
    >
      <Form.Item rules={[{required: true, message: '请选择'}]}>
      <CheckInput
        name='datasourceId'
        errormsg="请选择数据源名称"
        type="select"
        data={dataSourceList}
        showSearch
        disabled={!canEdit}
        filterOption={(input: string, option: any) =>
          option.children?.toLowerCase().indexOf(input.toLowerCase()) >= 0
        }
        allowClear
        placeholder="请选择数据源名称"
        style={{width: '100%'}}
      />
    </Form.Item>
    </Form>
  )

父组件index.tsx部分代码:

import {TopBarContext} from './TopBar'
import React, {useContext} from 'react';
const topBarContext = useContext(TopBarContext);

// 在父组件使用子组件里面的数据
const datasourceId = topBarContext.current?.getFieldValue('datasourceId');
if (!datasourceId) {
  message.error('请选择数据源')
  return;
}
posted @ 2021-12-31 17:22  johnny233  阅读(22)  评论(0编辑  收藏  举报  来源