react学习笔记5：状态和组件this

什么是状态？就是组件默认要使用的数据

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了，可以任意操作类中自定义的任何东西。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!