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

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

我正在创建一个秒表应用。当我单击“开始”和“停止”按钮时，秒表可以工作，但是一旦按下空格键，秒表就会从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>
        );
    }

}

我已经尝试过使用refs进行某些操作，但是没有任何一项可以使它做我想要的事情。基本上，我想按空格键以启动秒表，然后再次按它以停止秒表。我希望在加载页面时将重点放在“开始”按钮上，在秒表启动后将其放在“停止”按钮上。

解决方法

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

来自docs：

避免将refs用于可以声明式完成的任何事情。

在这种情况下，您并不是真正的引用，只是在窗口上有一个事件侦听器可以检测按键。卸下组件时，请根据需要进行清洁。您可以在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

---

尽管要完整回答，您可以通过将引用附加到每个按钮来使用与引用相同的逻辑。

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

,

要专门“切换”按钮的焦点，您可以选择在每个按钮上分配一个ref，然后在“开始”和“停止”计时器处理程序被使用时调用相反按钮的focus事件。调用并设置新状态。

this.state = { 
  milliSecondsElapsed: 0,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