全书目录

第一篇:React 完全指南 —— 空调宇宙

第五章:事件 —— 遥控器的按钮

1 分钟 56 字 第 27 / 962 个阅读单元
tsx
function RemoteControl() {
  const [temp, setTemp] = useState(26);
  const [isOn, setIsOn] = useState(false);

  const handlePowerPress = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <button onClick={handlePowerPress}>
        {isOn ? '关机' : '开机'}
      </button>

      <button onClick={() => setTemp(t => t - 1)}>▼ 降温</button>
      <button onClick={() => setTemp(t => t + 1)}>▲ 升温</button>

      <p>温度: {temp}°C</p>
    </div>
  );
}

setTemp(t => t - 1) 这种写法叫函数式更新。快速连按按钮时,这种写法能保证每次都基于最新值计算。