不能将 onChange 与 react-bootstrap ToggleButtonGroup 一起使用

Question

所以我发现这个问题已经过去了几个小时，而且每分钟都在变得越来越奇怪。主要问题是我无法使 onChange 事件在 ToggleButtonGroup 上工作。

我的代码：

class ToggleButtonGroupControlled extends React.Component {                                                                                                                                  
    constructor(props, context) {                                                                                                                                     
        super(props, context);                                                                                                                                        

        this.state = {                                                                                                                                                
            value: [1, 3],                                                                                                                                            
        };

        this.onChange = this.onChange.bind(this);                                                                                                                                    
    }                                                                                                                                                                 

    onChange(value){                                                                                                                                                  
        alert(value);                                                                                                                                                 
        this.setState({ value });                                                                                                                                     
    };                                                                                                                                                                

    render() {                                                                                                                                                        
        return (                                                                                                                                                      
            <ToggleButtonGroup                                                                                                                                        
              type="checkbox"                                                                                                                                         
              value={this.state.value}                                                                                                                                
              onChange={this.onChange}                                                                                                                                
              >                                                                                                                                                       
              <ToggleButton value={1}>Checkbox 1 (pre-checked)</ToggleButton>                                                                                         
              <ToggleButton value={2}>Checkbox 2</ToggleButton>                                                                                                       
              <ToggleButton value={3}>Checkbox 3 (pre-checked)</ToggleButton>                                                                                         
            </ToggleButtonGroup>                                                                                                                                      
        );                                                                                                                                                            
    }                                                                                                                                                                 
}

现在，当我选择不同的“复选框”时，显示会相应更改，但不会触发警报。此外，通过 Chrome React 扩展检查组件显示状态没有改变，因此它作为一个不受控制的组件留下，因为永远不会执行 onChange 处理程序。

然而，奇怪的是，docs demo 中使用了相同的代码，并且它可以正常工作。另一个奇怪的事情是，在演示中，我可以使用 React Developer Tools 通过$r.props.onChange 修改 onChange 处理程序，而在我的测试中我不能。 ToggleButtonGroup 使用uncontrollable 返回一个不受控制的 版本的组件，该组件包装了好的组件。不受控制的包装器具有我通过道具传递的onChange，但受控组件具有来自uncontrollable 的某个setAndNotify 函数，并且无法删除。

我真的不知道可能是什么问题，因为我认为我已经放弃了所有合理的可能性，但我可能遗漏了一些明显的东西——我真的希望我是。

提前感谢您的宝贵时间。

Answer 1

其他人也遇到此问题（请参阅this）。降级 react-boostrap 软件包版本应该可以工作