使用React Hooks控制ToggleButton时状态更新但视图无变化

问题场景 #

使用react-bootstrap的ToggleButton组件实现单选组，初始值为'b'时可正常渲染，但点击切换后，控制台显示state变量action已更新，然而视图上按钮的选中状态和右侧显示的action值均无变化。

原代码 #

const SLAWidget = (props) => {
    const [action, setAction] = useState('b');
    const handleonChange=(val) => { console.log('Clicked', val); setAction(val); }

    console.log('Rendering ActionValue',action)
    return (
        <Table size='sm'>
            <tbody>
                <tr>
                    <td>
                        Actions:
                    </td>
                    <td>
                        <ButtonGroup className="mb-2">
                            <ToggleButton id='inter-tbg-radio-1' type="radio" variant='outline-danger' value='a' checked={action === 'a'} onChange={(e)=>handleonChange(e.target.value)}>
                            a
                            </ToggleButton>
                            <ToggleButton id='inter-tbg-radio-2' type="radio" variant='outline-danger' value='b' checked={action === 'b'} onChange={(e)=>handleonChange(e.target.value)}>
                               b
                            </ToggleButton>
                           
                        </ButtonGroup>
                    </td>
                    <td>
                    {action}
                    </td>
                </tr>
            </tbody>
        </Table>
    );
}

控制台输出 #

Clicked b
Rendering ActionValue b
Clicked a
Rendering ActionValue a

原因分析及解决方法 #

问题核心在于单选类型的ToggleButton没有设置统一的name属性。

HTML原生单选按钮需要通过相同的name属性形成互斥组，React-Bootstrap的ToggleButton组件基于原生逻辑实现，同样依赖这个属性管理组内按钮的选中状态联动。缺少统一name时：

1. 组件无法识别这些按钮属于同一单选组，无法正确切换选中样式类；
2. 组件内部状态逻辑会与你维护的外部stateaction产生冲突，导致视图无法同步更新。

修改后的代码 #

只需给两个ToggleButton添加相同的name属性即可：

const SLAWidget = (props) => {
    const [action, setAction] = useState('b');
    const handleonChange=(val) => { console.log('Clicked', val); setAction(val); }

    console.log('Rendering ActionValue',action)
    return (
        <Table size='sm'>
            <tbody>
                <tr>
                    <td>
                        Actions:
                    </td>
                    <td>
                        <ButtonGroup className="mb-2">
                            <ToggleButton 
                                id='inter-tbg-radio-1' 
                                type="radio" 
                                variant='outline-danger' 
                                value='a' 
                                name="action-radio" {/* 添加统一name */}
                                checked={action === 'a'} 
                                onChange={(e)=>handleonChange(e.target.value)}
                            >
                                a
                            </ToggleButton>
                            <ToggleButton 
                                id='inter-tbg-radio-2' 
                                type="radio" 
                                variant='outline-danger' 
                                value='b' 
                                name="action-radio" {/* 添加统一name */}
                                checked={action === 'b'} 
                                onChange={(e)=>handleonChange(e.target.value)}
                            >
                               b
                            </ToggleButton>
                           
                        </ButtonGroup>
                    </td>
                    <td>
                    {action}
                    </td>
                </tr>
            </tbody>
        </Table>
    );
}

添加name属性后，单选组的互斥逻辑和样式切换会正常工作，视图也会同步你的state更新。

内容的提问来源于stack exchange，提问作者u tyagi