昨天把 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} />
現在可以看到所有大大小小的圖片都進到我的應用程式了。
先來改一下它的樣式
將將!!!好像有點樣子了!
要實作滑鼠移到圖片之上有動畫,可以透過 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 }
}
做出了滑鼠移入,圖片變暗文字顯示的效果了!
在 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
的地方,分別設定 text0
與 text1
作為上和下的輸入匡,再透過 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
}
}