1、错误描述
2、错误原因
import React, {Component} from 'react';
import {render} from 'react-dom';
import Button from 'react-bootstrap/Button'
class InputRead extends Component {
constructor() {
return { user: '' };
}
inputChange(e) {
this.setState({user:e.target.value});
}
clearAndFocus() {
this.setState({user:''},()=>{
this.refs.thisInput.focus();
})
}
render() {
return (
<div>
<Button onClick={this.clearAndFocus.bind(this)}>
清空
</Button>
<input ref="thisInput" value={this.state.user} onChange={this.inputChange.bind(this)}/>
</div>
)
}
}
export default InputRead;
构造函数中不能使用return语句,否则以为构造函数中需要添加render()方法
3、解决办法
import React, {Component} from 'react';
import {render} from 'react-dom';
import Button from 'react-bootstrap/Button'
class InputRead extends Component {
constructor(props) {
//return { user: '' };
super(props);
this.state = { user: '' };
}
inputChange(e) {
this.setState({user:e.target.value});
}
clearAndFocus() {
this.setState({user:''},()=>{
this.refs.thisInput.focus();
})
}
render() {
return (
<div>
<Button onClick={this.clearAndFocus.bind(this)}>
清空
</Button>
<input ref="thisInput" value={this.state.user} onChange={this.inputChange.bind(this)}/>
</div>
)
}
}
export default InputRead;