react改变this指向的两种方式

159 阅读1分钟

1:bind方式

    export default class About extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name:""
        }
        this.inChang=this.inChang.bind(this)
    }
    render() {
        return <div>
            <input type="text" value={this.state.name} onChange={this.inChang} />
            <h1>{this.state.name}</h1>
        </div>
    }
    inChang(e){
        console.log(this)
        this.setState({
            name:e.target.value
        })
    }
}

2:箭头函数

    export default class About extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            name: ""
        }
    }
    render() {
        return <div>
            <h3>我是About页面</h3>
            <input type="text" value={this.state.name} onChange={e => this.inChang(e)} />
            <h1>{this.state.name}</h1>
        </div>
    }
    inChang(e) {
        this.setState({
            name: e.target.value
        })
    }
}
   

扩展

<input type="text" value={this.state.name} onChange={e => this.setState({name: e.target.value})} />