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;

具體原因我說不清楚