TypeError: instance.render is not a function [React]

今天敲React的学习文档中的一个例子时出现了一个问题

通过在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称，然后通过 this.refs.name 来访问对应的 DOM 元素。

比如有一种情况是必须直接操作 DOM 来实现的，你希望一个 <input/> 元素在你清空它的值时 focus，你没法仅仅靠 state 来实现这个功能。

源码如下：

import React, {Component} from 'react';
import App from "../App";
class App2 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 default App2;

具体原因我说不清楚