TypeError: instance.render is not a function(React)
写了一个组件,原代码:
class App extends Component {
constructor() {
super();
return { userInput: ''} ;
}
handleChange(e) {
this.setState({ userInput: e.target.value });
}
clearAndFocusInput() {
this.setState({ userInput: '' }, () => {
this.refs.theInput.focus();
});
}
render() {
return (
<div>
<div onClick={this.clearAndFocusInput.bind(this)}>
Click to Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange.bind(this)}
/>
</div>
);
}
}
export {App};
报错:TypeError: instance.render is not a function![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/82bf499b8adb1b67c9216c47605e1c23.png)
错误原因:constructor不能用return返回值。
需要修改constructor的代码:
class App extends Component {
constructor() {
super();
this.state={ userInput: ''} ;
}
handleChange(e) {
this.setState({ userInput: e.target.value });
}
clearAndFocusInput() {
this.setState({ userInput: '' }, () => {
this.refs.theInput.focus();
});
}
render() {
return (
<div>
<div onClick={this.clearAndFocusInput.bind(this)}>
Click to Focus and Reset
</div>
<input
ref="theInput"
value={this.state.userInput}
onChange={this.handleChange.bind(this)}
/>
</div>
);
}
}
export {App};