iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 11
1
Modern Web

Zero to hero with React.js系列 第 11

【Day 11 React】Events and Data Changes in React

  • 分享至 

  • xImage
  •  

今天要介紹如何即時得到使用者輸入的色碼,並即時 render 到氣球上。
DEMO

建立 Component

首先,建立一個 Balloon component

class Balloon extends React.Component{
    render(){
        return(
        
        )
    }
}

每一個 component 的大架構都是如此,在 render 這個渲染方法中,撰寫 return 要回傳並渲染回 DOM 的內容。

上面是 ES2015 的寫法,還有另一種 functional 的寫法:

var Balloon = React.createClass(){
    render:function(){
        return(
        
        )
    }
}

建立變數,透過 createClass 來建立類別


建立完 component 之後,現在最後寫上

 ReactDOM.render();
 

這個最後渲染回 DOM 的語法需要放兩個參數

  1. 我所建立的 Component

  2. 綁定要渲染的 HTML 區塊

     ReactDOM.render(<Balloon />, document.getElementById('app'));
    

加入 Properties

向前面幾篇文章有提到的,我們可以透過 {this.props.<props-name>} 去取得某個 parent component 裡的 property

return(
     <section id="balloon">
        <h3>What color of balloon do you like?</h3>
     </section>
  );
  

在 JSX 語法裡面,它並不允許你有回傳多個 tags,因此只要有兩個以上 tags ,我們都必須再用一個 tag 把所有標籤包起來,我這邊用 <section></section> 包裝這些標籤。

我放了一個 ask props<Balloon /> component 裡,而在 Balloon component 便可透過 {this.props.ask} 來取得內容。

ReactDOM.render(<Balloon ask="What color of balloon do you like?" />, document.getElementById('app'));

此外,我們也可以在 JSX 語法中撰寫 HTML 的 CSS 樣式,不過不能像一般在 HTML tag 裡面寫。

<section style="background:red"></section>

我們要用物件的方是呈現

<section style={{background: "red"}}></section>

這邊有兩個大括弧,最外面的是 物件,裡面就像是在撰寫 CSS

section{
    background: red;
}

我們在 CSS 定義背景顏色會用到的
background-color 在 JSX 語法中要寫 backgroundColor

要定義字體大小用 fontSize,在 CSS 我們會在數字後面加上 px,不過 JSX 語法中只需要定義數字即可。

<section style={
    {
        background: "red",
        fontSize: 16
    }
}></section>

style variable

把所有的語法都寫在 tag 裡實在是難以閱讀,現在我只寫兩行樣式,若是需要更多樣式甚至可能會要用到許多互動或動畫效果,那麼程式碼會很難維護。因此,我在這邊創建一個 styleObj 的變數,把所有樣式都存放在這個變數裡,再用呼叫變數的方式放回 tag 中。

const styleObj = {
    backgroundColor: this.state.color,
    fontSize: 32 / 2
};

<section style={styleObj}></section>

State

state 是 React 的核心特色之一,每一次狀態(state)變更,就會觸發一次 Virtual DOM 去對照實際 DOM 的差別,用非常敏捷的方式渲染實際 DOM。

我先建立一個 state 物件,在每一個 JavaScript 的 class 底下都有一個 constructor,我們要把 props 參數傳進 constructor 裡,我們為了讓子類別使用 this.props,必須先調用 super 才能引用 this

constructor(props){
  super(props);
  
  this.state = {
     color: "#F07C65"
  }
}

在這邊我設定了預設的 state 是 #F07C65 這個色碼的顏色


呈現氣球顏色

在 render 裡先加上讓使用者輸入色碼的 input,並在 input 裡面綁 onChange 去觸發換色的 function

 <section style={styleObj} id="balloon">
    <h3>{this.props.ask}</h3>
    <input value={this.state.color} onChange={this.changeColor.bind(this)}/>
 </section>

換色 function 使用 changeColor()

changeColor(event){
  this.setState({
     color: event.target.value
  });
}

event.target.value 會去抓 input 裡面的 value,然後在 changeColor() 裡更新 state。

好的,完成了今日任務~
可以去連結裡玩玩看 DEMO


上一篇
【Day 10 React】透過番茄計時器實作理解 React State and Lifecycle
下一篇
【Day 12 React】React + Webpack ——搜尋功能 #Part1
系列文
Zero to hero with React.js30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言