如何在 React 的子功能组件中触发一个动作？

Question

使用基本的表单/输入布局，很明显应该使用回调来处理从子组件到父组件的状态更改（由子组件启动），但是父组件如何要求子组件重新评估其状态并传达该信息回到父级？

\n

这里的最终目标只是在提交表单按钮时触发子输入的验证。

\n

给定的 [ts] 代码如下所示：

\n

    const Login : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const onSubmit = () : void => {\n          //trigger `verify()` in PasswordInput to get up-to-date `valid` state var\n\n \n        }\n        \n        return (\n            <PasswordInput\n              onValidChange={setValid} />\n            <Button\n              onPress={submit} />\n        )\n    }\n\n\n    const PasswordInput : React.FC<Props> = (props) => {\n        ...useStates omitted\n\n        const verify = () => {\n          //verify the password value from state\n\n          props.onValidChange(true)\n        }\n\n\n        return (<Input onBlur={verify}/>) \n    }\n

\n

迄今为止采取的注释/路径：

\n

\n
• 您不能在函数组件上使用 ref 属性，因为它们没有\xe2\x80\x99t 实例。
\n
• 尝试使用useEffect更新submitted确实有效触发重新验证的状态变量，但 的排序useEffect总是在父组件评估之后onSubmit，导致值过时。valid即，在变量更新之前需要单击两次提交。
\n
• 反应版本 16.14.4
\n

\n

更新\n经验教训：

\n

\n
• 如果要在子组件中触发操作，可以使用下面 Nadia 概述的 refs 方法，但更合适的 React Way\xc2\xae 可能是通过共享的Reducer。
\n
• 不要期望在调用所述引用时始终通过对父级的回调来更新状态。就我而言，唯一有效的方法排序是让verify上面的方法实际返回最新值。
\n

\n

Answer 1

一个简单的例子说明如何解决这个问题

function Child(props)
{
    const validate = () => alert('hi from the child');
    props.registerCallback(validate)
    return (<div>I'm the child</div>)
}

function Parent()
{
    const callbackRef = React.useRef();

    function registerCallback(callback) {
        callbackRef.current = callback;
    }
    return (
        <div>
            <Child registerCallback={registerCallback} />
            <button onClick={() => callbackRef.current()}>
                say hello
            </button>
        </div>
    )
}

https://jsfiddle.net/4howanL2/5/