无法使用onChange与react-bootstrap ToggleButtonGroup

因此，我发现这个问题已经过去了几个小时，每分钟都会变得越来越诡异。主要问题是我无法设置onChange事件在ToggleButtonGroup上工作。无法使用onChange与react-bootstrap 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功能，并且无法将其删除。

我真的不知道可能是什么问题，因为我觉得我已经抛弃一切明智的可能性，但我可能是缺少明显的东西 - 我真的希望我。

提前感谢您的时间。

来源

2017-08-08 cronos2

你需要绑定你的'onChange'功能。 –

@AdamLeBlanc真的，我忘记了这一点，但这并不重要，因为问题在于函数从未执行。 – cronos2

其他人遇到这个问题，也是（参见this）。降级react-boostrap包的版本应该工作

来源

2017-08-08 19:37:59

是的，我忘了检查封闭的问题（虽然它似乎没有解决我（？））。无论如何，我会尝试降级。 – cronos2

正如预期的那样，它并不完美。看起来他们没有破坏任何东西，但它还没有完全正常工作。事实上，他们只是修改'index.js'出口到包括该模块甚至没有在一个月前按https://github.com/react-bootstrap/react-bootstrap/commit/b4e4ffabe9c8b90cfa687769a604a00656311d7e，所以它正在积极开发，这让我很遗憾。非常感谢你的时间。 – cronos2

无法使用onChange与react-bootstrap ToggleButtonGroup

回答

相关问题