简述
- this.setState 方法是React组件类(React.Component 的子类)的一个内置方法。当你在创建一个React组件类时,你继承自 React.Component,因此你的组件类会自动获得this.setState 方法。
- this.setState 用于更新组件的state。当state更新时,React会重新渲染该组件及其子组件。
使用this.setState代码栗子:
//以下为组件 Board 的代码(一个React 组件类对象)
class Board extends React.Component {
//构造函数来初始化 state(状态)
//在 JavaScript classes(类)中, 在定义子类的构造函数时,你需要始终调用 super 。
//所有具有 constructor 的 React 组件类都应该以 super(props) 调用启动它。
constructor(props) {
super(props);
this.state = { //等同于vue的data属性
squares: Array(9).fill(null),
};
}
handleClick(i) { //等同于vue2的method属性内定义的方法
const squares = this.state.squares.slice();
squares[i] = 'X';
//调用内置方法this.setState更新数据状态
this.setState({squares: squares});
}
renderSquare(i) {
return (
//这里的Square 是另外一个组件,这里没写
<Square
value={this.state.squares[i]}
onClick={() => this.handleClick(i)}
/>
);
}
render() {
const status = 'Next player: X';
// 以下等同于vue的模版template, XML 的标签。你的组件告诉 React 你要呈现的内容
return (
<div>
<div className="status">{status}</div>
<div className="board-row">
{this.renderSquare(0)}
{this.renderSquare(1)}
{this.renderSquare(2)}
</div>
<div className="board-row">
{this.renderSquare(3)}
{this.renderSquare(4)}
{this.renderSquare(5)}
</div>
<div className="board-row">
{this.renderSquare(6)}
{this.renderSquare(7)}
{this.renderSquare(8)}
</div>
</div>
);
}
}
文章来源地址https://www.toymoban.com/news/detail-861089.html
文章来源:https://www.toymoban.com/news/detail-861089.html
到了这里,关于React 之 内置方法setState改变state(一)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!