React hook实现复选框checkbox勾选，状态不触发重新渲染问题

项目需要实现一个弹窗，不再提醒的功能。需要用到input的checkbox实现。
通过在组件中使用useState控制checked属性

const [checked, setChecked] = React.useState(false)
const handleChange = () => {
    setChecked(!checked)
}

对应渲染组件

<StyledPromptText>
   <label>
        <input type="checkbox" checked={checked} onChange={handleChange} style={{ 'verticalAlign': 'middle' }} />
        {_('不再提示')}
    </label>
</StyledPromptText>

但是切换的时候，onchange事件只能改变state，不能主动触发组件渲染，更新勾选态

于是通过想了各种办法，想到了加一个key去主动触发react的渲染。
每一次checked变化都会影响到key，从而触发主动渲染。

<StyledPromptText>
   <label>
        <input type="checkbox" checked={checked} key={Number(checked)} onChange={handleChange} style={{ 'verticalAlign': 'middle' }} />
        {_('不再提示')}
    </label>
</StyledPromptText>

完美解决！切换流畅

后面优化了用户体验，让点击文字也可以修改check的状态

<StyledPromptText>
    <input type="checkbox" checked={checked} key={Number(checked)} onChange={handleChange} style={{ 'verticalAlign': 'middle' }} />
    <label onClick={handleChange}>{_('不再提示')}</label>
</StyledPromptText>