实现一个点赞按钮。点击数字增加
一:建立LikeButton.js
import React from 'react'
class LikeButton extends React.Component{
constructor(props){
super(props)
this.state={
likes:0
}
// this.increaseLikes=this.increaseLikes.bind(this);
}
increaseLikes(){
// alert(1234)
this.setState({
likes:++this.state.likes
})
}
render(){
return (
<div className="likes-button-component">
<button type="button" className="btn btn-outline-primary btn-lg" onClick={()=>{this.increaseLikes()}}>
{this.state.likes}
</button>
</div>
)
}
}
export default LikeButton
二:在App.js 中引入;
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import NameCard from './components/NameCard';
import LikesButton from './components/LikeButton';
const tags=['男神']
class App extends Component {
render() {
return (
<div className="App">
<div className={"App-header"}>
<img src={logo} className={"App-logo"} alt={"logo"}/>
<h2>欢迎来到矿洞程序员</h2>
{/*<NameCard name="chenxiaoyang" number={123456} isHuman tags={tags} />*/}
<LikesButton/>
</div>
</div>
);
}
}
export default App;
三、查看效果: