如何将useState的状态绑定为input按钮的value，随值变化更新且让useEffect实时读取？

1. 核心逻辑说明 #

按以下三步实现即可满足需求：

• 用useState声明一个状态变量存储按钮对应的值
• 每个按钮绑定点击事件，触发时调用状态更新方法传入当前按钮对应的值
• 把该状态变量加入useEffect的依赖数组，状态更新后useEffect会自动执行，内部读取的就是最新的状态值

2. 示例代码 #

import { useState, useEffect } from 'react'

function YourPage() {
  // 声明状态存储按钮对应值，初始值可根据实际需求调整
  const [btnValue, setBtnValue] = useState(null)

  // 状态变化时自动触发，可直接读取到最新的按钮值
  useEffect(() => {
    if (btnValue !== null) {
      // 此处编写对应业务逻辑即可，btnValue为最新点击的按钮对应值
      console.log('当前按钮最新值：', btnValue)
    }
  }, [btnValue]) // 必须把状态加入依赖数组，否则会出现读取旧值的闭包问题

  return (
    <div>
      {/* 8个按钮按同样格式绑定事件即可，括号内传入对应按钮的取值 */}
      <button onClick={() => setBtnValue('按钮1对应值')}>按钮1</button>
      <button onClick={() => setBtnValue('按钮2对应值')}>按钮2</button>
      <button onClick={() => setBtnValue('按钮3对应值')}>按钮3</button>
      <button onClick={() => setBtnValue('按钮4对应值')}>按钮4</button>
      <button onClick={() => setBtnValue('按钮5对应值')}>按钮5</button>
      <button onClick={() => setBtnValue('按钮6对应值')}>按钮6</button>
      <button onClick={() => setBtnValue('按钮7对应值')}>按钮7</button>
      <button onClick={() => setBtnValue('按钮8对应值')}>按钮8</button>
    </div>
  )
}

export default YourPage

注意事项 #

如果按钮对应值是动态生成的，直接把对应变量传入setBtnValue即可，无需额外处理。

内容的提问来源于stack exchange，提问作者Raul Semicek Coelho