Блог

Когда я открываю страницу, я хочу, чтобы она была сфокусирована на кнопке «Пуск», чтобы я мог нажать кнопку g для запуска секундомера. После того, как я его запущу, я хочу, чтобы фокус переместился на кнопку «Стоп», которую я могу остановить с помощью пробела. Я пытаюсь использовать ссылки, чтобы это произошло, но изо всех сил пытаюсь разобраться.

 import React, {useEffect, useReducer, useRef} from 'react';
import ReactDOM from 'react-dom';

class Home extends React.Component {

    // focus on start button before timer is started
    // once its started switch focus to stop button
    // redo

    constructor(props) {
        super(props);
        this.state = {milliSecondsElapsed: 0};
        this.updateState = this.updateState.bind(this);
        this.textInput = React.createRef();

    }

    updateState(e) {
        this.setState({milliSecondsElapsed: e.target.milliSecondsElapsed })
    }

    keyPress = (e) => {
        // g button
        if (e.keyCode == 71) {
            handleStart();
        }
    }

    keyPress = (e) => {
        // spacebar
        if (e.keyCode == 32) {
            handleStop();
        }
    }

    handleStart = () => {
        this.setState({
            milliSecondsElapsed: (0)
        });
        this.timer = setInterval(() => {
            this.setState({
                milliSecondsElapsed: (this.state.milliSecondsElapsed   1)
            });
        }, 10)
    }

    handleStop = () => {
        clearInterval(this.timer);
    }

    render() {
        return (

            
            <div className="index">
                <input value = {this.state.milliSecondsElapsed} onChange = {this.updateState} ref="myInput"></input>
                <button onClick = {this.handleStart}>START</button>
                <button onClick = {this.handleStop}>STOP</button>
            </div>

        );
    }

}

export default Home;