State służy do przechowywania wewnętrznego stanu komponentu, np: ilość kliknięć w dany element na stronie. Stan jest aktualizowany w czasie rzeczywistym za pomocą metody setState(). Aby to zrozumieć zobacz prosty przykład, który przygotowałem.
W przykładzie – użytkownik wprowadza treść do pola tekstowego input ; łańcuch znaków jest „na bieżąco” przepisywany do paragrafu <p></p>, a po kliknięciu na przycisk button wyświetli się również w nagłówku <h2></h2>.
Rozwiązanie:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>React.js</title> <script src="https://unpkg.com/react/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script> <script src="https://unpkg.com/babel-standalone/babel.js"></script> </head> <body> <div id="app"></div> <script type="text/babel"> class Example extends React.Component { constructor(props) { super(props); this.state = { result1: '', result2: '' }; this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); } render() { return ( <div> <form> <input onChange={this.handleChange} /> <button onClick={this.handleClick}>OK</button> <p>{this.state.result1}</p> <h2>{this.state.result2}</h2> </form> </div> ); } handleChange(e) { this.setState({ result1: e.target.value }); } handleClick(e) { e.preventDefault(); this.setState({ result2: this.state.result1 }); } } ReactDOM.render(<Example />, document.getElementById('app')); </script> </body> </html> |
W konstruktorze constructor(props) ustawiamy początkowe stany do zadania:
1 2 3 4 |
this.state = { result1: '', result2: '' }; |
- result1 – treść, która pojawi się w paragrafie <p></p>
- result2 – treść, która pojawi się w nagłówku <h2></h2>
1 2 |
<p>{this.state.result1}</p> <h2>{this.state.result2}</h2> |
Metoda super() wywołuje konstruktor klasy nadrzędnej, z której dziedziczy – czyli klasy React.component.
1 2 3 4 |
class Example extends React.Component { constructor(props) { super(props); |
W zadaniu są nam potrzebne dwie funkcje (np: handleChange, handleClick), które będą reagowały na zdarzenia (onChange i onClick) kontrolek formularza:
1 2 |
<input onChange={this.handleChange} /> <button onClick={this.handleClick}>OK</button> |
W konstruktorze są jedynie zadeklarowane, a bind wiąże instancję komponentu z daną funkcją:
1 2 |
this.handleChange = this.handleChange.bind(this); this.handleClick = this.handleClick.bind(this); |
Obie funkcje zawierają setState, które ustawiają bieżące stany dla result1 i result2:
1 2 3 4 5 6 7 8 9 10 |
handleChange(e) { handleChange(e) { this.setState({ result1: e.target.value }); } handleClick(e) { e.preventDefault(); this.setState({ result2: this.state.result1 }); } } |
W przypadku tej pierwszej, e.target.value – zwróci wartość pola input, na którym wywołano zdarzenie (e = event). W drugiej metodzie korzystamy z e.preventDefault(), co pozwoli anulować akcję na obiekcie, tzn. że po kliknięciu przycisku nie nastąpi przeładowanie strony 🙂 a jedynie zostanie zaktualizowany setState – stan argumentu result2.
I to wszystko 🙂
Do następnego! –>