Как обновить состояние, объявленное в родительском компоненте, до дочернего компонента, используя реагирующий хук - PullRequest
Новая
       5

Как обновить состояние, объявленное в родительском компоненте, до дочернего компонента, используя реагирующий хук

0 голосов
/ 06 апреля 2020

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

import React, {useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) =>{
const [show,setShow] = useState(false);
const toggle = () => setShow(!show);
return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <p>{show && <AddNewModal show={props.show} setShow={props.setShow}/>}</p>
    </div>
     )
}export default MouseContainer;

И дочерний компонент, который отображает модальное изображение так: 

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = (show,setShow) => {
return(
    <div>
    <Modal show={show} setShow={setShow}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={(props)=>props.setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}export default AddNewModal;

Как я могу обновить статистику, чтобы кнопка «Отмена» закрылась модал при нажатии?

Ответы [ 2 ]

2 голосов
/ 06 апреля 2020

Если я правильно понимаю, вы управляете модальным с помощью крюка useState. Если это так, ваша проблема связана с тем, какие реквизиты вы передаете компоненту AddNewModal.

Вы правильно создаете ловушку с помощью: 

const [show, setShow] = useState(false);

Однако вы передача неправильного реквизита компоненту AddNewModal. Вы передаете setShow и show, поступающие из реквизита в компоненте MouseContainer, здесь: 

<p>{show && <AddNewModal show={props.show} setShow={props.setShow} />}</p>

Однако, чтобы использовать ловушку, вы должны передать объявленные вами переменные: 

<p>{show && <AddNewModal show={show} setShow={setShow} />}</p>

Я не знаком с фреймворком bootstrap, но я думаю, что опора show модального компонента контролирует, показывается модал или нет. В этом случае вы также можете удалить условный рендер, в результате чего: 

<AddNewModal show={show} setShow={setShow} />

Вот ваш обновленный код для компонента MouseContainer: 

import React, { useState } from 'react';
import AddNewModal from './AddNewModal';

const MouseContainer = (props) => {
  const [show,setShow] = useState(false);
  const toggle = () => setShow(!show);

  return (
    <div>
        <button onClick={()=>setShow(!show)}>Toggle</button>
        <AddNewModal show={show} setShow={setShow} />
    </div>
  )
}

Кроме того, у вас есть маленький тип в AddNewModal:

Чтобы сразу получить требуемые поля реквизитов в объявлении функционального компонента, необходимо использовать деструктуризацию объекта [1], для этого используйте фигурные скобки:

const AddNewModal = ({ show, setShow }) => {

При этом вы не объявляете объект props, как в компоненте MouseContainer. Таким образом, вы не можете использовать его внутри функции.

Вот вам обновление AddNewModal: 

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({ show, setShow }) => {
  return (
    <div>
      <Modal show={show} setShow={setShow}> 
        <Modal.Header>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body><AddNewForm/></Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={() => setShow(!show)}>
            Cancel
          </Button>
        </Modal.Footer>
      </Modal>
    </div>
  )
}

Источники:

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

1 голос
/ 06 апреля 2020

Я думаю, что вы почти у цели, чтобы внести изменения ниже 

import React, {useState} from 'react';
import { Modal, Button } from 'react-bootstrap';
import AddNewForm from './AddNewForm';

const AddNewModal = ({show,setShow}) => {
return(
    <div>
    <Modal show={show}> 
    <Modal.Header>
      <Modal.Title>Modal heading</Modal.Title>
    </Modal.Header>
    <Modal.Body><AddNewForm/></Modal.Body>
    <Modal.Footer>
      <Button variant="secondary" onClick={()=>setShow(!show)}>
        Cancel
      </Button>
    </Modal.Footer>
  </Modal>
    </div>
  )
}
...