В Telegram Mini Apps вы можете реализовать подтверждение действия без использования отдельного модального окна, применяя компоненты интерфейса и состояния приложения. Вот несколько способов, как это можно сделать:
1. **Изменение состояния UI**: Вместо модального окна вы можете изменить состояние вашего компонента и отобразить подтверждение прямо на экране. Например, можно отобразить предупреждение под кнопкой или рядом с ней, когда пользователь инициирует действие.
2. **Индикаторы подтверждения**: Вы можете использовать индикаторы, такие как цветовые изменения кнопок или появление сообщения о подтверждении на временной основе. Например, измените текст кнопки на "Подтвердить действие?" с возможностью отмены.
3. **Tooltip/Popover**: Если вы не хотите отображать отдельное окно, можно использовать подсказки или поповеры, которые будут показывать текст подтверждения при наведении мышью или клике на кнопку.
4. **Inline-confirmation**: Вы можете выводить текст подтверждения непосредственно внутри компонента. Например, при нажатии на кнопку, вместо выполнения действия, можете отобразить текст "Вы уверены?", а затем предложить две кнопки: "Да" и "Нет".
Пример реализации с использованием состояния:
```jsx
import React, { useState } from 'react';
const MyComponent = () => {
const [confirming, setConfirming] = useState(false);
const handleAction = () => {
if (confirming) {
// Выполните действие
console.log('Действие подтверждено!');
setConfirming(false);
} else {
setConfirming(true);
}
};
return (
<div>
<button onClick={handleAction}>
{confirming ? 'Подтвердить?' : 'Выполнить действие'}
</button>
{confirming && (
<div>
<button onClick={() => { console.log('Действие отменено!'); setConfirming(false); }}>Отмена</button>
<button onClick={handleAction}>Да</button>
</div>
)}
</div>
);
};
export default MyComponent;
```
Таким образом, можно создать легкий интерфейс для подтверждения действия, избегая необходимости открывать отдельные модальные окна.