不能与react-bootstrap ToggleButtonGroup一起使用onChange [英] Can't use onChange with react-bootstrap ToggleButtonGroup

问题描述

因此，我发现这个问题已经过了几个小时，而且每分钟都在变弱。主要问题是我无法设法使onChange事件在ToggleButtonGroup上运行。

So it's been a couple of hours since I spotted this problem and it's getting weirder every minute. The main issue is I can't manage to make the onChange event work on a 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处理程序永远不会执行。

Now, when I select different "checkboxes" the display changes accordingly, but the alert is never fired. Furthermore, inspecting the component through the Chrome React extension shows the state doesn't change, so it's left as an uncontrolled component because the onChange handler is never executed.

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

The weird part, however, is that this same code is used in the docs demo and it just works. Another strange thing is that in the demo, I can modify the onChange handler via $r.props.onChange with React Developer Tools, while in my test I just can't. ToggleButtonGroup makes use of uncontrollable to return an uncontrolled version of the component wrapping the good one. The uncontrolled wrapper has the onChange I pass via props, but the controlled component has a certain setAndNotify function from uncontrollable attached and it can't be removed.

我真的不知道会出现什么问题，因为我认为我已经放弃了所有明智的可能性，但我可能会遗漏一些东西很明显 - 我真的希望我。

I really don't know what could be the problem since I think I have discarded all the sensible possibilities, but I might be missing something obvious -- I really hope I am.

提前感谢你的时间。

推荐答案

其他人也遇到此问题（请参阅此）。降级 react-boostrap 包版本应该有效

Other people encounter this issue as well (Refer to this). Downgrade react-boostrap package version should work

这篇关于不能与react-bootstrap ToggleButtonGroup一起使用onChange的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！