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() (и все другие методы жизненного цикла).
