React 事件中 this 的三种使用方式
1.bind绑定的方法
不传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
this.change = this.change.bind(this)
}
change(){
this.setState({
content:!this.state.content
})
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
this.change = this.change.bind(this,this.state.content)
}
change(obj){
this.setState({
content:!this.state.content
})
console.log(obj)
console.log(this.state.content)
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
2.属性初始化器的方式
不传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
}
change=()=>{
this.setState({
content:!this.state.content
})
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
}
change=obj=>{
this.setState({
content:!this.state.content
})
console.log(obj)
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
3.回调函数的方式
不传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
}
change(){
this.setState({
content:!this.state.content
})
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
{this.change()}}>
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
传参
class Hello extends React.Component{
constructor(){
super()
this.state = {
content:true
}
}
change(obj){
this.setState({
content:!this.state.content
})
console.log(obj)
}
render(){
return (
{this.state.content ? '1':'2'}
{this.props.name}
{this.change(this.state.content)}}>
点击
)
}
}
ReactDOM.render(
,
document.getElementById('example')
)
阿星
阿星
192***540@qq.com2年前 (2019-06-05)