react.js从入门到精通（二）——变量的定义和初始化、事件的使用
变量的定义和初始化
1、变量的定义和初始化
（1）使用在构造函数中创建
代码如下：
import React,{ Component } from 'react'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
{this.state.data}
</div>
)
}
}
export default Home- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
效果如下：
从上面的代码和效果我们可以看出，react.js的变量可以定义在state这个json对象中，接着把state这个json对象绑定在this上。
调用方式是：在dom树中需要用到的地方以{this.state.}方式进行使用。
（2）在render中创建
代码如下：
import React,{ Component } from 'react'
class Home extends Component {
render() {
let data="js是世界上最好的语言";
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}>
{data}
</div>
)
}
}
export default Home- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
效果与上面一样。
2、事件的使用
web前端是通过事件去操作界面的，所以在开发的过程中会用到大量的事件，下面以点击事件为例。
（1）事件的定义和使用
代码如下：
import React,{ Component } from 'react'
class Home extends Component {
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click()}>
{this.state.data}
</div>
)
}
click=()=>{
alert("点到了!!!");
};
}
export default Home- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
效果如下：
（2）方法中参数的引入
代码如下：
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}>
{this.state.data}
</div>
)
}
click=(data)=>{
alert(data);
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
效果如下：
3、通过事件来操作变量值的变化
代码如下：
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={()=>this.click(this.state.data)}>
{this.state.data}
</div>
)
}
click=(data)=>{
this.setState({
data:"你说的对！！！"
});
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
效果如下：
this.setState()作用是将state中的数据进行修改，同时刷新界面，修改this.state.中的对应变量的值。
4、自调用事件
代码如下：
constructor(props) {
super(props);
this.state = {
data:"js是世界上最好的语言"
};
}
render() {
return (
<div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}} onClick={this.click(this.state.data)}>
{this.state.data}
</div>
)
}
click=(data)=>{
this.setState({
data:"你说的对！！！"
});
};- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
自调用事件：在界面加载的时候就自己执行了，不需要进行点击操作。
