Как получить свойство из прокидываемых props при открытии модального окна?

Как передать id клиента из дочернего компонента в компонент ModalWindowChanges при открытии модального окна?
  • 14 февраля 2024 г. 21:18
Ответы на вопрос 2
Чтобы получить свойство из прокидываемых props при открытии модального окна, можно сделать следующие шаги:

1. В компоненте, открывающем модальное окно, создайте состояние, которое будет отслеживать, открыто ли модальное окно. Например, используйте useState хук:

```javascript
import React, { useState } from 'react';

function ParentComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  
  // ...
  
  return (
    <div>
      {/* Button to open modal */}
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      
      {/* Modal Window */}
      {isModalOpen && <ModalWindowChanges />}
    </div>
  );
}
```

2. В компоненте ModalWindowChanges, определите свойство для передачи id клиента:

```javascript
import React from 'react';

function ModalWindowChanges({ clientId }) {
  // ...
  
  return (
    {/* Modal Window JSX */}
  );
}

export default ModalWindowChanges;
```

3. При открытии модального окна, передайте id клиента из дочернего компонента в компонент ModalWindowChanges:

```javascript
import React, { useState } from 'react';
import ModalWindowChanges from './ModalWindowChanges';

function ParentComponent() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const clientId = '123'; // здесь должна быть логика получения id клиента
  
  // ...
  
  return (
    <div>
      {/* Button to open modal */}
      <button onClick={() => setIsModalOpen(true)}>Open Modal</button>
      
      {/* Modal Window */}
      {isModalOpen && <ModalWindowChanges clientId={clientId} />}
    </div>
  );
}
```

Теперь внутри компонента ModalWindowChanges вы сможете обращаться к свойству clientId и использовать его в модальном окне.
Не надо никаких v-model , кого показывать в модальном окне - отправляйте наверх эту информацию вместе с событием. Свойство, которое управляет видимостью модального окна - пусть оно вместо логического значения хранит id или объект или что там у вас должно показываться в окне, если не null , значит открываем окно. Вот так всё просто .
Похожие вопросы