在React中子组件中触发效果的最佳模式
在React中子组件中触发效果的最佳模式
提问于 2020-09-25 14:55:34
假设我有父函数组件和子函数组件。父级希望在子级中触发一些效果，如焦点或调整大小。例如，我有一个通用表单组件(子组件)，它包含一个submit按钮，而父组件(它包含所有非通用表单UI )希望使子组件聚焦于submit按钮。
问题是，父级不能直接调用函数来聚焦，所以我必须在子级上设置一些道具，当它发生变化时，它会告诉子级运行效果。但是，父母必须知道何时执行了动作，以便它可以重新设置道具，为下一次可能需要触发效果做好准备。这就是我要做的：
export const Form: FunctionComponent<FormProps> = props => {
const [focusOkay, setFocusOkay] = useState(false);
function handleKey(e: React.KeyboardEvent) {
if (e.key === 'Enter') {
setFocusOkay(true);
}
}
return (
<ChildForm
focussedOkay={() => setFocusOkay(false)}
focusOkay={focusOkay}
>
<input onChange={handleKey} />
</ChildForm>
);
};
export const ChildForm: FunctionComponent<ChildProps> = props => {
const okayBtn = useRef<HTMLButtonElement>();
useEffect(() => {
if (props.focusOkay) {
okayBtn.current.focus();
if (props.focussedOkay) {
props.focussedOkay();
}
}
}, [props.focusOkay]);
return (
<button ref={okayBtn} >OK </button>
);
}这很有效，但我觉得它很丑陋，因为它需要使用两个道具，一个让父母说“聚焦按钮”，另一个让孩子回答“好的，我聚焦了”。有没有更好的方法？
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-09-25 15:16:15
我通常在forwardRef hoc中包装子元素后，在子元素中设置一个引用，然后自己从父元素调用焦点
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64059267
复制相关文章
相似问题
腾讯云开发者
