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

效果如下：

 
從上面的代碼和效果我們可以看出，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

效果與上面一樣。

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

效果如下：

（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); };

效果如下：

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:"你說的對！！！" }); };

效果如下：

 
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:"你說的對！！！" }); };

自調用事件：在界面加載的時候就自己執行了，不需要進行點擊操作。

注意：以上代碼都是以es6格式進行編寫，如果不熟悉es6語法，請點擊下方地址，進行學習。es6語法相對於es5語法更接近java語言，更加的嚴謹，也越來越受歡迎。

http://es6.ruanyifeng.com/