不能在react-bootstrap ToggleButtonGroup上使用onChange

时间:2017-08-08 18:02:24

标签: javascript twitter-bootstrap reactjs react-bootstrap

因为我发现了这个问题已经过了几个小时了,而且每分钟都会变得怪异。主要问题是我无法设法使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>                                                                                                                                      
        );                                                                                                                                                            
    }                                                                                                                                                                 
}

现在,当我选择不同的&#34;复选框&#34;显示会相应更改,但警报永远不会被触发。此外,通过Chrome React扩展程序检查组件会显示状态不会发生变化,因此它会作为不受控制的组件离开,因为onChange处理程序永远不会被执行。

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

我真的不知道可能会出现什么问题,因为我认为我已经抛弃了所有合理的可能性,但我可能会遗漏一些明显的东西 - 我真的希望自己是这样。

提前感谢您的时间。

1 个答案:

答案 0 :(得分:1)

其他人也遇到此问题(请参阅this)。降级react-boostrap包版本应该可以正常工作