调用复选框上的函数

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> 
}

但它不起作用。。。。有人有主意吗？

非常感谢

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>
);