在父级单击事件后从父级访问子状态

Question

如何在父级中触发点击事件后从父级访问子状态？

我正在使用模态组件，这就是事件未从子组件触发的原因。

const Parent = () => {
    ...
    return (
        <Modal 
            saveHandler={ () => { 
                 // Get child state here to do some stuff with
            }} ... >
            <Child ... />
        </Modal>
    )
}


const Child = () => {
    const [state, dispatch] = useReducer(reducer, []);
    ...
}

Answer 1

您可以将 Ref 与 useImperativeHandle 结合使用以允许父级访问子级状态

const Parent = () => {
    const childRef = useRef(null);
    ...
    return (
            <Modal 
                    saveHandler={ () => { 
                        // Get child state here to do some stuff with
                        console.log(childRef.current.state);
                    }} ... >

                    <Child ref={childRef} ... />
            </Modal>
    )
}


const Child = (props, ref) => {

    const [state, dispatch] = useReducer(reducer, []);
    useImperativeHandle(ref, () => ({
       state
    }), [state])
    ...
}

export default forwardRef(Child);

虽然你可以使用上面的代码做你想做的事情，但建议你将状态提升到父组件并将其作为道具传递给子组件

const Parent = () => {
    const [state, dispatch] = useReducer(reducer, []);
    ...
    return (
            <Modal 
                    saveHandler={ () => { 
                        // Get child state here to do some stuff with
                        console.log(state);
                    }} ... >

                    <Child state={state} dispatch={dispatch} ... />
            </Modal>
    )
}


const Child = ({state, dispatch}) => {

    ...
}

Answer 2

如果您可以使用 child 传递点击事件，您可以像这样轻松地将数据从 child 传输到 parent...

const dispatch = (stateOfChild) => {
  // do something
}
 return (
   <Modal 
     <Child propsName = {stateOfChild => dispatch(stateOfChild)} />
   </Modal>
  )

并且在 child

 const Child = () => {
 return (
   <div
     onClick= {() => props.propsName(stateOfChild)} ></div>
  )     
 }

在父级单击事件后从父级访问子状态

Access the child state from the parent after click event from the parent

reactjs

react-hooks