[de_yum]

Czy jest ktoś z was w stanie napisać najłatwiejszego popupa jakiego się da, z wykorzystaniem klasowych komponentów i BEZ UŻYCIA zewnętrznych bibliotek? Wszystkie przykłady co znalazłem to albo czysty js albo jakieś zewnętrzne biblioteki/komponenty funkcyjne ( ͡° ʖ̯ ͡°)


#react #reactjs #javascript

[Smonk_Da_Wead]

@de_yum
ez z palcem w dupie

[Davidozz]

@de_yum: Dajesz w state [showPopup, setShowPopup] = useState(false)

Renderujesz warunkowo {showPopup & & <div>tutaj co chcesz</div>}

I teraz zależy kiedy chcesz go renderować, ale wtedy za każdym razem musisz użyć funkcji setShowPopup(true) a jak zamykasz to na false

[Davidozz]

@de_yum: a czekaj, bo klasowe komponenty xD To podobnie, tylko zamiast useState to w this.state dodajesz showPopup: false, a zamiast funkcji to chyba trzeba napisać własną

[Davidozz]

@Smonk_Da_Wead: i w renderowaniu zamiast showPopup to this.state.showPopup

[Davidozz]

@de_yum:
import React, { Component } from 'react'

export default class SomeComponent extends Component {
constructor(props) {
super(props);
this.state = {
showPopup: false
}
}

showPopup() {
this.setState({showPopup: true});
}

closePopup() {
this.setState({showPopup: false});
}

render() {
return (
<div>
<button onClick={this.showPopup.bind(this)}>Show popup</button>
<button onClick={this.closePopup.bind(this)}>Hide popup</button>
{this.state.showPopup && <div>POPUP</div>}
</div>
)
}
}


[Davidozz]

@de_yum: Jak chcesz jakiś z timeoutem, np. pojawiający się po jakimś czasie po otworzeniu strony, to musisz poczytać o component lifecycle, a konkretnie tym.

https://reactjs.org/docs/react-component.html#componentdidmount

Wtedy do ciała klasy jako metodę dodajesz:

componentDidMount() {
    setTimeout(this.showPopup.bind(this), 2000)
  }

[rimyi]

wykorzystaniem klasowych komponentów

@de_yum: a tak zapytam, po co klasowy komponent?

[de_yum]

@Davidozz
Dzięki za pomoc, ale cholera, dokładnie tak mam (co mnie swoją drogą pociesza), więc wychodzi na to że nie ma "ładniejszego" sposobu.
@rimyi
Bo takie było wymaganie profesora,. Ciężko niezauważyć zalet hooków i komponentów funkcjonalnych no ale cóż, mają być klasowe, koniex kropka.

Pozostaje mi tylko zrobić jakoś sensownie przyciemniony background po otwarciu modala (błędnie wczesniej pisałem że chodzi mi o 'popup', ale zasada działania ta w kodzie modala i popupa

[Davidozz]

@de_yum:

Dzięki za pomoc, ale cholera, dokładnie tak mam (co mnie swoją drogą pociesza), więc wychodzi na to że nie ma "ładniejszego" sposobu.

No nie wiem co mogłoby być prostsze od tego. Też często na początku miałem myśli, że może istnieje jakiś super sposób na moje problemy, a często okazywało się, że ludzie robią po chłopsku.

Myslę żeby zrobić komponent overlay ze stylem który będzie miał rozmiary w css 100%, background

[de_yum]

@Davidozz: Oki, dziękuję ʕ•ᴥ•ʔ