react笔记02
通过在React组件的构造函数中设置this.state来初始化state。this.state应该被视为一个组件的私有属性。在this.state中存储当前每个方格(Square)的值,并且在每次方格被点击的时候改变这个值。
class Square extends React.Component {
constructor(props) {
super(props);
//1.super()仅在具有构造函数的React组件内部被调用;
//2.但如果我们有一个构造函数,那么它super()是强制性的
this.state = {
value:null,
}
};
//1.render():是class组件中唯一必须实现的方法
//2.当render被调用时,它会检查this.props和this.state的变化并返回。
render() {
return (
<button className="square" onClick={() => console.log('click')}>
{this.props.value}
</button>
)
}
}
注:在javaScript中,每次定义其子类的构造函数时,都需要调用super方法。因此,在所有含有构造函数的React组件中,构造函数必须以super(props)开头
修改一下Square组件的render方法,每当方格被点击的时候可以显示当前state的值:
1.在
2.将 onClick={...}事件监听函数替换为 onClick={()=>this.setState({value:'X'})}
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
}
};
render() {
return (
<button
className="square"
onClick={() => {this.setState({value:'X'})}}
>
{this.state.value}
</button>
);
}
}
在Square组件render方法中的onClick事件监听函数中调用this.setState,我们就可以在每次