React Положение
React компоненты, имеет встроенный объект state
.
Объект state
- это место, где хранятся значения свойств, принадлежащие компоненту.
Когда объект state
изменяется, компонент повторно визуализируется.
Создание объекта state
Объект state
инициализируется в конструкторе:
Пример:
Указать объект state
в методе конструктора:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {brand: "Ford"};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
Объект state
может содержать столько свойств, сколько вам нравится:
Пример:
Укажите все необходимые свойства вашего компонента:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My Car</h1>
</div>
);
}
}
С помощью объекта state
Обратитесь к объекту state
в любом месте компонента, используя синтаксис this.state.propertyname
:
Пример:
Обратитесь к объекту state
в методе render()
:
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
</div>
);
}
}
Изменение объекта state
Чтобы изменить значение в объекте состояния, используйте метод this.setState()
.
При изменении значения в объекте state
компонент будет повторно визуализирован,
что означает, что выходные данные изменятся в соответствии с новым значением(ми).
Пример:
Добавьте кнопку с событием onClick
, которое изменит свойство "color":
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Ford",
model: "Mustang",
color: "red",
year: 1964
};
}
changeColor = () => {
this.setState({color: "blue"});
}
render() {
return (
<div>
<h1>My {this.state.brand}</h1>
<p>
It is a {this.state.color}
{this.state.model}
from {this.state.year}.
</p>
<button
type="button"
onClick={this.changeColor}
>Change color</button>
</div>
);
}
}
Всегда используйте метод setState()
, чтобы изменить состояние объекта,
это гарантирует, что компонент знает, что он был обновлен,
и вызывает метод render()
(и все другие методы жизненного цикла).