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})} />