reactjs - 在复选框上调用函数

Question

我是 React 的初学者。我想在复选框上调用一个函数。

这是我的代码：

<div>
    <img src={user.picture} alt={user.name}/>
    <h2> {user.name} </h2>
    <WeatherFront></WeatherFront> 
</div> 

但我想做这样的事情：

<div>
  <img src={user.picture} alt={user.name}/>
  <h2> {user.name} </h2>
  <Stack tokens={stackTokens}>
      <Checkbox label="Weather" onChange={_onChangeWeather} />
  </Stack>
</div> 

复选框更改时调用函数：

function _onChangeWeather(ev: React.FormEvent<HTMLElement>, isChecked: boolean) {
    <WeatherFront></WeatherFront> 
}

但它不起作用....有人有想法吗？

非常感谢

标签： reactjsfrontend

Answer 1

这应该有效：

const [isChecked, setIsChecked] = useState(false);

function _onChangeWeather() {
  setIsChecked(!isChecked);
}

return (
  <div>
    <img src={user.picture} alt={user.name} />
    <h2> {user.name} </h2>
    <Stack tokens={stackTokens}>
      <Checkbox label="Weather" onChange={_onChangeWeather} />
    </Stack>
    {isChecked ? <Weather /> : ''}
  </div>
);