如何在React中实现点击按钮切换自身value属性值

问题根源 #

• 按钮的value属性硬编码为固定空字符串，没有和state绑定，导致每次点击获取的e.target.value永远是空值，不会跟随state变化
• React的setState是异步批量更新的，同一个事件回调内多次调用setButtonValue不会立刻更新state，基于e.target.value的判断永远只会命中第一个分支，导致值更新到value1后就不再变化
• 三个if判断为并行执行逻辑，就算取值正确也会被连续覆盖，无法得到预期结果

直接修复代码 #

首先修改按钮组件，把value属性绑定到state：

<button value={buttonValue} onClick={valueHandler}>
  Click to change value
</button>

然后修改事件处理函数，使用state的前值进行判断（推荐用setState的函数式更新写法，保证拿到最新的前值）：

const valueHandler = () => {
  setButtonValue(prev => {
    if (prev === '') return 'value1'
    if (prev === 'value1') return 'value2'
    return ''
  })
}

更优的扩展实现方案 #

如果后续需要增加更多切换值，可以把可选值预定义为数组，通过索引取模实现循环切换，无需修改判断逻辑：

// 预定义切换序列，后续新增值直接修改该数组即可
const VALUE_OPTIONS = ['', 'value1', 'value2']
const [buttonValue, setButtonValue] = useState(VALUE_OPTIONS[0]);

const valueHandler = () => {
  setButtonValue(prev => {
    const currentIdx = VALUE_OPTIONS.indexOf(prev)
    const nextIdx = (currentIdx + 1) % VALUE_OPTIONS.length
    return VALUE_OPTIONS[nextIdx]
  })
}

内容的提问来源于stack exchange，提问作者Arttu