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

debugcn 发表于 Dev

扎克

通过基本的表单/输入布局，很明显应该使用回调来将状态从子状态更改为父状态（由子状态发起），但是父级如何要求子组件重新评估其状态并将其传达回父级？

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

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

    const Login : React.FC<Props> = (props) => {
        ...useStates omitted

        const onSubmit = () : void => {
          //trigger `verify()` in PasswordInput to get up-to-date `valid` state var

 
        }
        
        return (
            <PasswordInput
              onValidChange={setValid} />
            <Button
              onPress={submit} />
        )
    }


    const PasswordInput : React.FC<Props> = (props) => {
        ...useStates omitted

        const verify = () => {
          //verify the password value from state

          props.onValidChange(true)
        }


        return (<Input onBlur={verify}/>) 
    }

到目前为止所采取的注释/路径：

您不能在功能组件上使用ref属性，因为它们没有实例。
尝试使用useEffect更新submitted状态变量来有效触发重新验证，但是对的排序useEffect总是在父组件求值之后进行onSubmit，导致值过期。即，在valid变量最新之前，需要两次单击提交。
React版本16.14.4

更新经验教训：

如果要在子组件中触发动作，请使用下面Nadia概述的refs方法。
不要指望在调用该引用时总是通过回调到父对象来更新状态。就我而言，唯一有效的方法排序是使verify上面的方法实际返回最新值。

娜迪亚·奇布里科娃（Nadia Chibrikova）

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

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/

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。