Question

我正在构建一个简单的React组件，并对某些事情感到困惑。这是代码的症结所在：

const handleToggleButtonClick = (event) => {
  console.log('handleToggleButtonClick', event.target.value);
  if (event.target.value !== undefined) {
    const newVal = (event.target.value === 'true');
    setIsFirstButton(newVal);
  }
};

return (
  <ToggleButton value='true' onClick={handleToggleButtonClick}>
    Sample Text
  </ToggleButton>
)

当我将React组件添加到我的应用程序并运行它时，event.target.value最初是undefined，紧接着是true。假设value被硬编码为true，为什么会变成undefined？

Answer 1

看看文档https://react-bootstrap.github.io/components/buttons/#toggle-button-props，我认为您的组件中滥用了事件处理程序。如果要使用独立的切换按钮，则应改用onChange

<ToggleButton value='true' onChange={handleToggleButtonClick}>

Answer 2

该按钮似乎必须切换某些状态，但是您可以通过target.value存储初始状态。

为什么不使用：

const [toggledState, setToggleState) = useState(true)

然后，当您触发事件处理程序时，是否只是更新状态？例如setToggleState(!toggledState)。这将使每次点击的状态反转。

这样做的好处是，您不必将状态存储在切换开关上，而不必对其进行突变。其次，您将状态压低。而不是坚持向上并进行修改（无需额外的努力）。

为什么事件处理程序返回的事件最初是“未定义的”？

2 个答案: