iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 29
0
Modern Web

Zero to hero with React.js系列 第 29

【Day 29 React】Redux+API 製作 meme generator—— Part3

Create meme items

昨天把 API 裡的 meme names 都 render 出來之後,我們今天要把圖片呈現出來。
先在 component 底下,建立一個 MemeItem.js

import React, { Component } from 'react';


class MemeItem extends Component{
    render(){
      return (
        <div>
          <img
          src={this.props.meme.url}
          alt={this.props.meme.name}
          />
          <p>
            {this.props.meme.name}
          </p>
        </div>
      )
    }
}

export default MemeItem;

定義完 component 之後,記得要定義 props。回到 App.js,把剛剛製作的 component import 進來

import MemeItem from './MemeItem';

並在原本渲染呈現 meme names 的地方

<h4 key={index}>{meme.name}</h4>

轉換成 MemeItem component tag

<MemeItem key={index} meme={meme} />


現在可以看到所有大大小小的圖片都進到我的應用程式了。
先來改一下它的樣式
將將!!!好像有點樣子了!


Animating Memes Items 讓它動ㄘ動

要實作滑鼠移到圖片之上有動畫,可以透過 css 的 hover,不過,如果要從 React 實作的話,我們可以透過 setState 不斷地更新 hover 的狀態。在 MemeItem component 中設置 constructor

constructor(){
  super();

  this.state = {
    hovered: false
  }
}

將預設 hover 設為 false

<div 
  className="meme-item"
  onMouseEnter={() => this.setState({ hovered: true })}
  onMouseLeave={() => this.setState({ hovered: false })}
>

當滑鼠移入時 hovered 的狀態會改成 true
接著,我們要加入一些條件性的 css 類別,它會基於 state 去切換要套用的樣式。例如,當滑鼠移到圖片上的話就顯示文字,滑鼠移出便不要顯示文字。我們可以使用 ternary expression 來實作

{className={meme}}

<p className={ this.state.hovered ? "meme-txt" : "no-txt"}>

同樣地,圖片的類別名稱也可以改成

<img
      src={this.props.meme.url}
      alt={this.props.meme.name}
      className={ this.state.hovered ? "meme-img darken-img" : "meme-img"}     />
      

在 css 設定樣式⋯⋯

.meme-txt {
  width: 150px;
  text-align: center;
  position: absolute;
  border-radius: 5px;
  bottom: 0;
  animation-name: fade-in;
  animation-duration: 1s;
  font-size: 14px;
}

.no-txt {
  display: none;
}

.darken-img {
  background-color: gray;
  filter: brightness(10%);
  animation-name: darken;
  animation-duration: 1s;
}

@keyframes darken {
  from {filter: brightness(90%)};
  to {filter: brightness(10%)};
}

@keyframes fade-in {
  from { opacity: 0 }
  to { opacity: 40 }
}

做出了滑鼠移入,圖片變暗文字顯示的效果了!


客製化 meme form

App.js import 我們要用到的 Form 相關 component

import { From, FormGroup, FormControl, ControlLabel } from 'react-bootstrap';

渲染我們的 form

<Form inline>
  <FormGroup>
    <ControlLabel>Top</ControlLabel>
    {' '}
    <FormControl type="text"></FormControl>
  </FormGroup>
  {' '}
  <FormGroup>
    <ControlLabel>Bottom</ControlLabel>
    {' '}
    <FormControl type="text"></FormControl>
  </FormGroup>
</Form>


做出輸入框了!


賦予輸入框生命

state 的地方,分別設定 text0text1 作為上和下的輸入匡,再透過 onChange handler 綁定

<FormControl
    type="text"
    onChange = {event => this.setState({text0: event.target.value})}
>

綁定 input 值之後,我們要把取得的值顯示在圖片上

<MemeItem
    key={index}
    meme={meme}
    text0={this.state.text0}
    text1={this.state.text1} 
  />
  

進到 MemeItem.js 撰寫 postMeme function

  postMeme(){
console.log('this', this.props);

}

透過 onClick={() => this.postMeme() 綁定

接下來要製作 action creator,先進到 /action/index.js

 export const NEW_MEME = 'NEW_MEME';
 
 export function newMeme(meme){
  return{
    type: NEW_MEME,
    meme
  }
}

上一篇
【Day 28 React】Redux+API 製作 meme generator—— Part2
下一篇
【Day 30 React】Redux+API 製作 meme generator—— 完結篇
系列文
Zero to hero with React.js30

1 則留言

0
Luis-Chen
iT邦新手 4 級 ‧ 2018-01-05 14:37:16

加油!! 剩最後一天了 你超厲害!!

嗚嗚嗚嗚謝謝你!!
終於寫完惹~~
我們一起加油 :)
/images/emoticon/emoticon08.gif

我要留言

立即登入留言