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

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

对于基本的表单/输入布局，很明显回调应该用于从子组件到父组件的状态更改（由子组件发起），但是父组件如何要求子组件重新评估其状态并传达该信息回到父母身边？

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

给定看起来像这样的 [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}/>) 
    }

到目前为止所采取的注意事项/路径：

• You may not use the ref attribute on function components because they don’t have instances.
• 尝试使用 useEffect 更新 submitted 状态变量，该变量确实有效地触发了重新验证，但 useEffect 的排序总是在父组件评估 onSubmit 之后，导致过时的值。 IE。在 valid 变量更新之前，需要点击两次提交。
• React 版本 16.14.4

更新 经验教训：

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

解决方法

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

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/

,

在对 React 进行了更多了解以及对工作解决方案进行了几次迭代之后，我决定使用 Reducer 来完成这项任务。

我没有将子组件视为要调用的函数，而是将我的想法转变为更多地围绕更新状态并信任子组件正确表示该状态。对于我最初的示例，我最终构建了与此类似的结构（所有内容都简化并修剪了）：

interface LoginState {
    email: { 
      status: 'none' | 'verify' | 'valid',value?: string
    }
    password: { 
      status: 'none' | 'verify' | 'valid',value?: string
    }
    submit: boolean
}
const Login : React.FC<Props> = (props) => {

        const [state,dispatch] = useReducer<Reducer>(reducer,{
            email: { status: 'none' },password: { status: 'none' }}
        })

        export const reducer = (state : LoginState,change : StateChange) : LoginState => {

            if (change.email) {
                state.email = _.merge({},state.email,change.email)
            }

            if (change.password) {
                state.password = _.merge({},state.password,change.password)
            }

            return _.merge({},state)
        }

        const submit = () : void => {
            dispatch({
                email: { status: 'verify' }},password: { status: 'verify'}}},submit: true
            })
 
        }

        useEffect(() => {
            if (!state.submit 
                || state.email.status == 'none' 
                || state.password.satus == 'none') {
                return
            }

            //ready to submit,abort if not valid
            if (state.email.status == 'invalid'
                || state.password.status == 'invalid') {
                dispatch({ submit: false})
                return
            }

           //all is valid after this point
        },[state.email,state.password])
        
        return (
            <Input ...
            <PasswordInput
              state={state.password}
              dispatch={dispatch} />
            <Button
              onPress={submit} />
        )
    }


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

        //setup onChangeText to dispatch to update value

        return (<Input
                  //do something visual with props.state.status
                  value={props.state.value}
                  onBlur={dispatch({ status: 'verify'})} ... />) 
    }

上面是粗略的代码，但要点就在那里。这传达了底层值的更新状态，这些值在中央级别减少。然后通过告诉输入它们处于状态 verify，在子组件级别重新呈现此状态。当 submit 设置为 true 时，我们尝试提交表单，并在此过程中进行验证。