什么是状态?就是组件默认要使用的数据
1.定义状态
在定义组件,我们知道使用的是子类继承父类的方式,我们直接在构造函数中设置即可:
//设置组件 class Event extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { msg: "hello",count: 1 }; } render() { return <div> <p>{this.state.msg}</p> <p>{this.state.count}</p> </div>; } }
这样,this.state就有绑定的各种初始化状态值了
整体代码:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Event extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { msg: "hello",count: 1 }; } render() { return <div> <p>{this.state.msg}</p> <p>{this.state.count}</p> </div>; } } ReactDOM.render( <div> <Event /> </div>,document.getElementById('root') ); registerServiceWorker();
2.事件修改状态
react为我们提供了修改状态的api,就是继承父类而来的,
this.setState({状态名字:修改的值});
很简单,我们还是用click事件去操作,然后让count+1处理:
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import registerServiceWorker from './registerServiceWorker'; //设置组件 class Event extends React.Component { constructor(props) { super(props); // 设置 initial state this.state = { msg: "hello",count: 1 }; } add(){ var newcount=this.state.count+1; this.setState({count:newcount }); } render() { return <div> <p>{this.state.msg}</p> <p onClick={this.add.bind(this)}>{this.state.count}</p> </div>; } } ReactDOM.render( <div> <Event /> </div>,document.getElementById('root') ); registerServiceWorker();
3.说说组件中的this
我们创建组件采用的是子类继承父类的方法,可以使用构造函数,可以随便的书写,
在内部this就是类的this,代表创建的对象,我们随便使用是没有问题的,不过当我们绑定事件的时候,我们知道事件调用的方法中this指向变化了,所以我们这么写就会出现错误:
为了解决和事件this的冲突问题,我们需要在绑定事件调用方法的位置把类的this作为参数传递个调用的方法:
这时候的this就是代表类的this了,可以任意操作类中自定义的任何东西。