抽离事件方法,下方代码会报错,原因是this指向问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="root"></div>
<script type="text/babel">
// 将处理方法抽离出来
class Hello extends React.Component {
constructor() {
super()
this.state = {
count: 1
}
}
handleClick() {
// console.log(this) // 这里的this为undefined,控制台报错
this.setSate({
count: this.state.count + 1
})
}
render() {
return (
<button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'))
</script>
</body>
</html>
方法一
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="root"></div>
<script type="text/babel">
// 将处理方法抽离出来
class Hello extends React.Component {
constructor() {
super()
this.state = {
count: 1
}
this.handleClick = this.handleClick.bind(this)
}
handleClick() {
// console.log(this)
this.setSate({
count: this.state.count + 1
})
}
render() {
return (
<button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'))
</script>
</body>
</html>
方法二
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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="root"></div>
<script type="text/babel">
// 将处理方法抽离出来
class Hello extends React.Component {
constructor() {
super()
this.state = {
count: 1
}
}
handleClick = () => {
this.setState({
count: this.state.count + 1
})
}
render() {
return (
<button onClick={this.handleClick}>计数器--------------{this.state.count}</button>
)
}
}
ReactDOM.render(<Hello />, document.getElementById('root'))
</script>
</body>
</html>