需求说明
父组件触发事件改变子组件的状态
举例
例子: 切换父组件tab时,重置子组件表单。在第一个tab下的搜索表单填写的搜索条件,在切换tab时,需清空表单内容
代码结构
const parent = () => {
return (
<>
<Tabs onChange={changeTabs}>
{tabsList?.map((tabItem: tabItem) =>
<TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
</Tabs>
<SearchForm {...DynamicFormParams} />
</>
)
}
功能实现
由于触发事件在父组件,无法从子组件传值。首先想到的是用ref来获取到实例。如下
const parent = () => {
const searchRef = React.useRef()
return (
<>
<Tabs onChange={changeTabs}>
{tabsList?.map((tabItem: tabItem) =>
<TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
</Tabs>
<SearchForm
ref={searchRef}
{...DynamicFormParams} />
</>
)
}
此时出现以下报错
React不建议在函数组件上使用ref,根据报错找了下forwardRef文档。
做了一下调整
// 父组件
// 正常从useRef获取一个ref对象并附给子组件
const parent = () => {
const searchRef = React.useRef()
const changeTabs = async (currentKey: string) => {
await setSearchValue({})
// 清空子组件表单内容
SearchNode?.current?.resetFields()
setCurTab(tabsList.find((item: tabItem) => item.appKey == currentKey))
}
return (
<>
<Tabs onChange={changeTabs}>
{tabsList?.map((tabItem: tabItem) =>
<TabPane tab={tabItem.keyName} key{tabItem.appKey}></TabPane>)}
</Tabs>
<SearchForm
ref={searchRef}
formList={formList}
searchFun={searchFun}
initVal={initVal}
/>
</>
)
}
// 子组件
// 用React.forwardRef包裹子组件,接收两个参数,依次是props和ref
// 将ref添加在要获取的组件上
// 注意:若需设置TS类型,第一位为ref的类型,第二位为props的类型
const SearchForm = React.forwardRef<FormInstance, SearchFormParams>(({formList,searchFun, initVal}, ref) => {
return (
<Form
form={form}
onFinish={onFinish}
initialValues={initVal}
ref={ref}
>
<Row gutter={24}>
<DynamicForm
formList={formList}
/>
<Col {...rowList}>
<FormItem>
<Space>
<Button type="primary" htmlType="submit">搜索</Button>
<Button onClick={onReset}>重置</Button>
</Space>
</FormItem>
</Col>
</Row>
</Form>
)
})
至此,功能实现,并且不再报错。
其他详细信息查看 官方文档