如何在点击时更改按钮值？

Question

我正在尝试做一个默认值设置为 '' 的按钮，当单击按钮时，它自己的值应该会改变。这是我已经尝试过的方法。

首先我做了新的挂钩状态，将值设置为 '':

const [buttonValue, setButtonValue] = useState('');

然后我做了事件处理程序，它应该根据当前值设置新值。值默认设置为 ''，单击按钮时值应更改为 value1，再次单击值应更改为 value2，最后当值设置为 value2 时应改回默认 ''。第一次单击按钮时，值实际上变为 value1 但随后值不再改变：

const valueHandler = (e) => {
  setButtonValue(e.target.value);

  if (e.target.value === '') {
    setButtonValue('value1');
  }
  if (e.target.value === 'value1') {
    setButtonValue('value2');
  }
  if (e.target.value === 'value2') {
    setButtonValue('');
  }
}

最后我做了实际的按钮，它应该改变它自己的值：

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

有什么想法可以让按钮在点击时改变它自己的价值吗？另外，如果有人对此有更好的解决方案，我正在听:)

Answer 1

const [buttonValue, setButtonValue] = useState('')

const valueHandler = (e) => {
   if (e.target.value === 'value1') {
      setButtonValue('value2')
   } else {
      setButtonValue('')
   }
}

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

您之前没有在<button>中使用buttonValue。

如何在点击时更改按钮值？

How to change button value on click?

events

reactjs

react-hooks