Доступ к дочернему состоянию от родителя после события click от родителя - PullRequest
Новая
       16

Доступ к дочернему состоянию от родителя после события click от родителя

1 голос
/ 25 марта 2019

Как получить доступ к дочернему состоянию от родителя после запуска события щелчка в родительском элементе?

Я использую модальный компонент, поэтому событие не инициируется дочерним компонентом. 

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


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

Ответы [ 2 ]

3 голосов
/ 25 марта 2019

Вы можете использовать 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}) => {

    ...
}
0 голосов
/ 25 марта 2019

Если вы можете использовать дочерний элемент для передачи события щелчка, вы можете легко передавать данные от дочернего элемента к родительскому, например, так ... 

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

а у ребенка 

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