react里面的this_React 事件中 this 的三种使用方式

阿星

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')

)