<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
// 封装App 组件
class App extends React.Component{
constructor(){
super();
this.state = {
message:'你好呀',
counter:100
}
// 2
this.btnClick = this.btnClick.bind(this);
}
render(){
return (
<div>
{/* 1 */}
<button onClick={this.btnClick.bind(this)}>按钮1</button>
<button onClick={this.btnClick}>按钮2</button>
{/* 2 */}
<button onClick={this.btnClick}>按钮3</button>
<button onClick={this.increment}>+ 1</button>
{/* 3 */}
<button onClick={()=>{
// console.log(this.state.counter);
this.decrement();
}}>- 1</button>
</div>
)
}
// 1 || 2
btnClick(){
console.log(this.state.message);
}
// 2
increment = () => {
console.log(this.state.counter);
}
// 3
decrement(){
console.log(this.state.counter);
}
}
ReactDOM.render(<App/>,document.getElementById('app'));
</script>
</body>
</html>
