反映形式的变化不会因价值变动而触发

Question

React dom 16.4.0。

里面有一个带输入的表格。使用编程方式更改输入值不会触发表单onChange：

class Bar extends React.PureComponent<IProps, IState> {
  private foo: any;

  constructor(props: IProps, state: IState) {
    super(props);
    ..
    this.foo = React.createRef();
    ..

<form>
  ..
  <input ref={this.foo} type="text" />

..
private handleClick(e: React.MouseEvent<HTMLElement>) {
  const event = new MouseEvent('click', {
    'bubbles': true,
    'cancelable': false,
    'view': window,
  });
  this.foo.current.dispatchEvent(event); <- doesn't trigger form's onChange

在React官方GitHub上找到this topic。还发现此StackOverflow主题为lots of similar solutions（没有一个工作）。

那么任何想法如何实际使输入元素触发onChange？

重要提示：我实际上是在尝试Bootstrap button-group工作。由于使用跨度点击隐藏和控制无线电，因此不会触发onChange。