First edition (out of date)

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    constructor(props) {
        this.handleChange = this.handleChange.bind(this);
    }

    handleChange() {
        this.refs.myref.focus();
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.name}
                    ref="myref"
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

Copy the code

The second edition

import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.myRef = React.createRef();
    }

    handleChange() {
        this.myRef.current.focus();
    }

    render() {
        return (
            <div>
                <input
                    type="text"
                    value={this.state.name}
                    ref={this.myRef}
                    onChange={this.handleChange}
                />
            </div>
        );
    }
}

ReactDOM.render(<App />, document.getElementById('app'));

Copy the code