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

Question

我正在创建一个秒表应用程序。当我单击开始和停止按钮时，秒表可以工作，但是一旦我按空格键，它就会在 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 的事情，但没有一个必须导致它做我想做的事情。基本上，我想按空格键启动秒表，然后再次按它以停止秒表。我想在加载页面时将焦点放在开始按钮上，在秒表启动后将焦点放在停止按钮上。

Answer 1

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

从文档中：

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

在这种情况下，您并没有真正引用，只需在窗口上有一个检测按键的事件侦听器即可。卸下组件时根据需要进行清洁。您可以在按键函数上实现一些逻辑，以评估计时器是应该停止还是启动。

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>

代码沙盒：https://codesandbox.io/s/hardcore-bush-nzg76?file=/src/App.js

---

不过，为了完成答案，您可以通过简单地将 ref 附加到每个按钮来使用 refs 使用上述相同的逻辑。

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>

代码沙盒：https://codesandbox.io/s/priceless-liskov-fgbid?file=/src/App.js