![](/img/trans.png)
[英]How to test a handle function call with a react functional component with hooks
[英]React 16: Call children's function from parent when using hooks and functional component
我需要在他们的父组件中调用孩子的 function 。 我该怎么做? 以前在 React 15 中,我可以使用 refs 来调用 children 的 function。 但是不知道如何使用钩子和功能组件来做到这一点。
function Child(props) {
function validate() {
// to validate this component
}
return (
<>Some code here</>
)
}
function Parent(props) {
const refs = useRef([]);
const someData = [1,2,3,4,5];
function validateChildren() {
refs.current.forEach(child => {
child.current.validate(); // throw error!! can not get validate function
});
}
return (
<>
<button onClick={validateChildren}>Validate</button>
{
someData.map((data, index) => {
return <Child ref={ins => refs.current[index] = ins} />
})
}
</>
)
}
我的实际要求是: 1. 可以添加多个选项卡,根据用户的行为删除 2. 单击选项卡父级中的按钮触发验证 3. 所有选项卡都需要自行验证,在其选项卡中显示错误消息并返回验证消息
您可以将useImperativeHandle
与forwardRef
一起使用。
从文档中,
useImperativeHandle自定义使用 ref 时暴露给父组件的实例值。 与往常一样,在大多数情况下应避免使用 refs 的命令式代码。 useImperativeHandle应该与forwardRef一起使用
const Child = React.forwardRef((props,ref) => {
//validate will be available to parent component using ref
useImperativeHandle(ref, () => ({
validate() {
// to validate this component
console.log("I'm clicked");
}
}));
return (
<>Some code here</>
)
})
在父组件中,您可以访问子 function 为,
function validateChildren() {
refs.current.forEach(child => {
child.validate(); // you can access child method here
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.