@kurt
Состояние компонента в React.js используется для хранения и управления данными, которые могут изменяться во время работы приложения. Состояние компонента является внутренним и может быть изменено только компонентом, который его содержит.
Для использования состояния в React.js нужно:
1 2 3 4 5 6 7 8 9 10 |
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, message: 'Hello World' }; } //... } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, message: 'Hello World' }; } handleClick() { this.setState({ count: this.state.count + 1 }); } //... } |
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 |
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0, message: 'Hello World' }; } handleClick() { this.setState({ count: this.state.count + 1 }); } render() { return ( <div> <p>{this.state.message}</p> <button onClick={() => this.handleClick()}> Click me ({this.state.count}) </button> </div> ); } } |
В этом примере мы определили начальное состояние компонента с помощью метода this.state
в конструкторе. Затем мы обновили состояние, когда пользователь нажал кнопку, используя метод this.setState()
. Наконец, мы использовали состояние в методе render()
, чтобы отобразить его значение на экране.
Запомните, что изменение состояния вызывает перерисовку компонента. Поэтому следует использовать setState()
только тогда, когда нужно изменить состояние компонента.