组件的状态
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>10-帶有狀態的組件.html</title>
</head>
<body>
<div id="app"></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">class MyComponent extends React.Component {constructor () {// 如果子類加入了 constructor 構造函數，則一定要手動調用父類的構造函數 supersuper()// React 組件需要通過手動為組件類添加 state 成員來初始化：ViewModel// state 等價于 Vue 中的 data// 接下來就可以在該組件管理的模板中通過 {} 來訪問綁定數據了this.state = {message: 'Hello, MyComponent!'}}render () {return (<div><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1><h1>{this.state.message}</h1>{/** 事件綁定函數默認情況下內部的 this 指向 Window* 自動接收一個 event 事件源對象* 1. this 指向了 Window* 2. 只能得到 event 無法傳參*/}{/** bind 了 this 的函數調用的時候，好會給你傳遞一個 event 事件源對象* 內部的 this 就是你 bind 的那個參數* 1. 可以指定 this* 2. 支持傳參數，參數在前，事件源對象在最后* 推薦這種方式*/}<button onClick={this.handleClick.bind(this)}>點擊改變 message</button></div>)}// 規范：處理事件方法都取名為 handlexxxhandleClick (num1, num2, e) {console.log(num1, num2, e)// console.log('handle click')// console.log(this) // 默認是 window// React 不是使用的類似于 Vue 中的 Object.defineProperty() 方式 get、set// this.state.message = 'hello world'// 現在只需要知道，如果要修改 state 中的數據并且希望得到視圖更新，則一定要使用// this.setState 方法this.setState({message: 'hello world'})}}const element = <MyComponent />ReactDOM.render(element, document.getElementById('app'))
</script>
</body>
</html>
?
總結
- 上一篇： class的继承
- 下一篇： 事件绑定中的this问题