不能将 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>                                                                                                                                      
        );                                                                                                                                                            
    }                                                                                                                                                                 
}

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

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

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

提前感谢您的宝贵时间。

Answer 1

其他人也遇到这个问题（参考this）。降级 react-boostrap 软件包版本应该有效

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

Can't use onChange with react-bootstrap ToggleButtonGroup

javascript

twitter-bootstrap

reactjs

react-bootstrap