无法使用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
功能,并且无法将其删除。
我真的不知道可能是什么问题,因为我觉得我已经抛弃一切明智的可能性,但我可能是缺少明显的东西 - 我真的希望我。
提前感谢您的时间。
你需要绑定你的'onChange'功能。 –
@AdamLeBlanc真的,我忘记了这一点,但这并不重要,因为问题在于函数从未执行。 – cronos2