Javascript 反应：为什么'；我的应用程序的状态不会更新吗？

我用React JS制作了这个小应用程序：

var TextBox=React.createClass({
通知：函数（）{
让item=this.refs.inputElement；
this.props.changeHandler（item.dataset.variable，item）；
},
render:function（）{
返回(
);
}
});
var按钮=React.createClass({
render:function（）{
功能通知（e）{
this.props.handler（e.target.dataset.operation）；
}
返回(
);
}
});
变量计算器=React.createClass({
初始状态：{a:'输入一个数字！例如248'，
b:'输入一个数字！例如1632'，
aClass:“输入框”，
B类：'输入框'}，
操作：{
“添加”：函数（）{
返回this.state.a+this.state.b；
},
“减法”：函数（）{
返回this.state.a-this.state.b；
},
“乘法”：函数（）{
返回this.state.a*this.state.b；
},
“divide”：函数（）{
返回this.state.a/this.state.b；
}
},
getInitialState:函数（）{
返回this.INIT_状态；
},
updateNumbers:函数（变量，引用）{
var val=parseFloat（参考值）；
var varClass=[variable+'Class']；
if（typeof val=='number'&&&！isNaN（val））{
if（this.state[variable+'Class'].indexOf（'invalid-input'）>-1）{
这是我的国家({
[varClass]：此.state[varClass].split（“”）[0]
})
}
这是我的国家({
[变量]：val
});
}否则{
这是我的国家({
[varClass]：[varClass]+“无效输入”
});
}
},
触发器操作：功能（操作）{
var result=this.operations[operation].call（this）；
this.refs.resultBox.refs.inputElement.value=结果；
},
resetForm:function（）{
this.setState（this.INIT_状态）；
这个.forceUpdate（）；
console.log（this.state）；
},
render:function（）{
var=这个；
var navButtons=this.props.navButtons.map（函数（按钮））{
返回(
);
});
返回(
简易计算器
{navButtons}
);
}
});
变量导航按钮=[
{classDiv:'large-3 column'，
值：'+Add'，
classButton:'计算方法导航按钮'，
操作：“添加”
},
{classDiv:'large-3 column'，
值：'-减去'，
classButton:'计算方法导航按钮'，
操作：“减法”
},
{classDiv:'large-3 column'，
值：“x乘”，
classButton:'计算方法导航按钮'，
操作：“乘法”
},
{classDiv:'large-3 column'，
值：'/Divide'，
classButton:'计算方法导航按钮'，
操作：“分割”
}
];
ReactDOM.render（，document.getElementById（'app'））
$primaryColor:rgba（2452452452451.0）；
$secondaryColor:rgba（1501501501.0）；
$lightUp:20%；
$buttonColor:rgba（51,71,255,1.0）；
$borderRadius:6px；
@mixin addPseudoClasses（$selector，$color）{
#{$selector}：已访问，#{$selector}：悬停{
颜色：白色；
}
#{$selector}：悬停{
背景：线性渐变（加亮（$color，$lightUp），$color）；
颜色：白色；
}
#{$selector}：活动{
不透明度：0.6；
}
}
身体{
背景：线性渐变（加亮（$secondaryColor，$lightUp），$secondaryColor）；
}
.导航按钮{
文字装饰：无；
颜色：白色；
填充：5px20px；
背景色：粉蓝色；
文本对齐：居中；
字号：900；
边缘底部：16px；
显示：内联块；
宽度：100%；
边界半径：$borderRadius；
}
.计算方法{
背景：线性渐变（加亮（$buttonColor，$lightUp），$buttonColor）；
}
@包括AddPseudoClass（“.calculation method”，橙色）；
h1{
文本对齐：居中；
利润率：20px 0 30px；
}
.注意{
背景：线性梯度（变暗（深粉色，20%），变亮（深粉色，20%）；
文本转换：大写；
}
@包括addPseudoClasses（“.attention”，红色）；
.输入无效{
边框颜色：红色！重要；
背景色：粉红色！重要；
}
TextBox
组件正在接收prop
值，但您没有使用它，这就是它没有重新渲染的原因

您的
文本框
组件应该是

var TextBox = React.createClass({
  notify: function() {
    let item = this.refs.inputElement;

    this.props.changeHandler(item.dataset.variable, item);
  },
  render: function() {   
    return (
      <div className={ this.props.divClass }
           ref={ this.props.ref }>
          <input type="text"
                 placeholder={ this.props.placeholder} 
                 ref="inputElement" 
                 className={ this.props.textBoxClass }
                 disabled={ this.props.disabled } 
                 onChange={ this.notify }
                 data-variable={ this.props.variable } 
                 value={this.props.value} // You were missing this
            />
      </div>
    );
  }
});


片段


var TextBox=React.createClass({
通知：函数（）{
让item=this.refs.inputElement；
this.props.changeHandler（item.dataset.variable，item）；
},
render:function（）{
返回(
);
}
});
var按钮=React.createClass({
render:function（）{
功能通知（e）{
this.props.handler（e.target.dataset.operation）；
}
返回(
);
}
});
变量计算器=React.createClass({
初始状态：{a:'输入一个数字！例如248'，
b:'输入一个数字！例如1632'，
aClass:“输入框”，
B类：'输入框'}，
操作：{
“添加”：函数（）{
返回this.state.a+this.state.b；
},
“减法”：函数（）{
返回this.state.a-this.state.b；
},
“乘法”：函数（）{
返回this.state.a*this.state.b；
},
“divide”：函数（）{
返回this.state.a/this.state.b；
}
},
getInitialState:函数（）{
返回this.INIT_状态；
},
updateNumbers:函数（变量，引用）{
var val=parseFloat（参考值）；
var varClass=[variable+'Class']；
if（typeof val=='number'&&&！isNaN（val））{
if（this.state[variable+'Class'].indexOf（'invalid-input'）>-1）{
这是我的国家({
[varClass]：此.state[varClass].split（“”）[0]
})
}
resetForm: function() {
    this.setState(this.INIT_STATE, () => console.log(this.state));
},