如何使用ref在react.js中的两个按钮之间切换？

Question

我正在创建一个秒表应用程序。当我点击start和stop按钮时，秒表就会工作，但只要我点击空格键，它就会在0处重新启动，并开始加快秒表的速度。

class Home extends React.Component {
    constructor(props) {
        super(props);
        this.state = {milliSecondsElapsed: 0};
        this.updateState = this.updateState.bind(this);
        this.textInput = React.createRef();
    }
    textInput = () => {
        clearInterval(this.timer);
    }
    updateState(e) {
        this.setState({milliSecondsElapsed: e.target.milliSecondsElapsed })
    }
    ...
    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={this.textInput}/>
                <button onClick = {this.handleStart}>START</button>
                <button onClick = {this.handleStop}>STOP</button>
            </div>
        );
    }

}

我用裁判做了一些尝试，但都没有达到我想要的效果。基本上，我想按空格键来启动秒表，然后再按一次它来停止秒表。我希望在加载页面时将焦点放在start按钮上，并在秒表启动后将焦点放在stop按钮上。

Answer 1

在使用React进行编程时，请始终评估是否可以在不使用ref的情况下完成任务。

从docs

避免对任何可以通过声明方式完成的操作使用ref。

在这个场景中你并不是真的引用，只是在窗口上有一个事件侦听器来检测按键。卸载组件时，请根据需要进行清理。您可以在keyPress函数上实现一些逻辑来评估计时器是应该停止还是应该启动。

this.state = { 
  milliSecondsElapsed: 0,
  timerInProgress: false // state to detect whether timer has started
};

componentDidMount() {
    window.addEventListener("keypress", this.keyPress);
}

keyPress = (e) => {
    // some logic to assess stop/start of timer
    if (this.state.milliSecondsElapsed === 0) {
        this.handleStart();
    } else if (this.state.timerInProgress === false) {
        this.handleStart();
    } else {
        this.handleStop();
    }
};

<button onClick={this.handleStart} ref={(ref) => (this.startBtn = ref)}>
    START
</button>
<button onClick={this.handleStop} ref={(ref) => (this.startBtn = ref)}>
    STOP
</button>

CodeSandBox：https://codesandbox.io/s/hardcore-bush-nzg76?file=/src/App.js

为了完成回答，你可以使用上面相同的逻辑使用ref，只需将ref附加到每个按钮上。

keyPress = (e) => {
  // some logic to assess stop/start of timer
  if (this.state.milliSecondsElapsed === 0) {
    this.startBtn.click();
  } else if (this.state.timerInProgress === false) {
    this.startBtn.click();
  } else {
    this.stopBtn.click();
  }
};

<button onClick={this.handleStart} ref={(ref) => (this.startBtn = ref)}>
  START
</button>
<button onClick={this.handleStop} ref={(ref) => (this.stopBtn = ref)}>
  STOP
</button>

https://codesandbox.io/s/zealous-chaum-zcfl6?file=/src/App.js

Answer 2

要明确地“切换”按钮的焦点，您可以选择在每个按钮上分配一个ref，然后在调用"start“和"stop”计时器处理程序并设置新状态时调用相反按钮的focus事件。

this.state = { 
  milliSecondsElapsed: 0,
  timerInProgress: false // state to detect whether timer has started
};

componentDidMount() {
    window.addEventListener("keypress", this.keyPress);
}

keyPress = (e) => {
  // some logic to assess stop/start of timer
  if (this.state.milliSecondsElapsed === 0) {
    this.startBtn.click();
  } else if (this.state.timerInProgress === false) {
    this.startBtn.click();
  } else {
    this.stopBtn.click();
  }
};

handleStart = () => {
  if (this.state.timerInProgress === true) return;

  this.setState({
    milliSecondsElapsed: 0
  });
  this.timer = setInterval(() => {
    this.setState(
      {
        milliSecondsElapsed: this.state.milliSecondsElapsed + 1,
        timerInProgress: true
      },
      () => {
        this.stopBtn.focus(); /* switch focus to STOP button */
      }
    );
  }, 10);
};
handleStop = () => {
  this.setState(
    {
      timerInProgress: false
    },
    () => {
      clearInterval(this.timer);
      this.startBtn.focus(); /* switch focus to START button */
    }
  );
};

<button onClick={this.handleStart} ref={(ref) => (this.startBtn = ref)}>
  START
</button>
<button onClick={this.handleStop} ref={(ref) => (this.stopBtn = ref)}>
  STOP
</button>

CodeSandBox：https://codesandbox.io/s/priceless-liskov-fgbid?file=/src/App.js