0
我做了这个小应用程序与之反应JS：反应：为什么我的应用程序的状态不会更新？
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 } />
</div>
);
}
});
var Button = React.createClass({
render: function() {
function notify(e) {
this.props.handler(e.target.dataset.operation);
}
return (
<div className={ this.props.classDiv }>
<a href='#' className={ this.props.classButton }
onClick={ notify.bind(this) }
data-operation={ this.props.operation }>
{ this.props.value }
</a>
</div>
);
}
});
var Calculator = React.createClass({
INIT_STATE: { a: 'Enter a number ! For example 248',
b: 'Enter a number ! For example 1632',
aClass: 'input-box',
bClass: 'input-box' },
operations: {
'add': function() {
return this.state.a + this.state.b;
},
'subtract': function() {
return this.state.a - this.state.b;
},
'multiply': function() {
return this.state.a * this.state.b;
},
'divide': function() {
return this.state.a/this.state.b;
}
},
getInitialState: function() {
return this.INIT_STATE;
},
updateNumbers: function(variable, reference) {
var val = parseFloat(reference.value);
var varClass = [variable + 'Class'];
if (typeof val === 'number' && !isNaN(val)) {
if (this.state[variable + 'Class'].indexOf('invalid-input') > -1) {
this.setState({
[varClass]: this.state[varClass].split(' ')[0]
})
}
this.setState({
[variable]: val
});
} else {
this.setState({
[varClass]: [varClass] + ' invalid-input'
});
}
},
triggerOperation: function(operation) {
var result = this.operations[operation].call(this);
this.refs.resultBox.refs.inputElement.value = result;
},
resetForm: function() {
this.setState(this.INIT_STATE);
this.forceUpdate();
console.log(this.state);
},
render: function() {
var that = this;
var navButtons = this.props.navButtons.map(function(button) {
return (
<div>
<Button value={ button.value } classDiv={ button.classDiv }
classButton={ button.classButton }
handler={ that.triggerOperation } operation={ button.operation }/>
</div>
);
});
return (
<div className="calculator">
<div className="row">
<h1>Simple calculator</h1>
</div>
<div className="row">
<TextBox divClass="large-6 columns"
placeholder={ this.state.a }
ref="a" textBoxClass={ this.state.aClass }
value={ this.state.a }
changeHandler={ this.updateNumbers }
variable="a"
/>
<TextBox divClass="large-6 columns"
placeholder={ this.state.b }
ref="b" textBoxClass={ this.state.bClass }
value={ this.state.b }
changeHandler={ this.updateNumbers }
variable="b"
/>
</div>
<div className="row">
{ navButtons }
</div>
<div className="row">
<TextBox divClass="large-9 columns"
placeholder="Result"
ref="resultBox" textBoxClass="input-box"
disabled="disabled" />
<Button value="Clear" classDiv="large-3 columns"
classButton="attention nav-button"
handler={ this.resetForm } />
</div>
</div>
);
}
});
var NAV_BUTTONS = [
{ classDiv: 'large-3 column',
value: '+ Add',
classButton: 'calculation-method nav-button',
operation: 'add'
},
{ classDiv: 'large-3 column',
value: '- Subtract',
classButton: 'calculation-method nav-button',
operation: 'subtract'
},
{ classDiv: 'large-3 column',
value: 'x Multiply',
classButton: 'calculation-method nav-button',
operation: 'multiply'
},
{ classDiv: 'large-3 column',
value: '/ Divide',
classButton: 'calculation-method nav-button',
operation: 'divide'
}
];
ReactDOM.render(<Calculator navButtons={ NAV_BUTTONS } />, document.getElementById('app'));$primaryColor: rgba(245, 245, 245, 1.0);
$secondaryColor: rgba(150, 150, 150, 1.0);
$lightUp: 20%;
$buttonColor: rgba(51, 71, 255, 1.0);
$borderRadius: 6px;
@mixin addPseudoClasses($selector, $color) {
#{$selector}:visited, #{$selector}:hover {
color: white;
}
#{$selector}:hover {
background: linear-gradient(lighten($color, $lightUp), $color);
color: white;
}
#{$selector}:active {
opacity: 0.6;
}
}
body {
background: linear-gradient(lighten($secondaryColor, $lightUp), $secondaryColor);
}
.nav-button {
text-decoration: none;
color: white;
padding: 5px 20px;
background-color: powderBlue;
text-align: center;
font-weight: 900;
margin-bottom: 16px;
display: inline-block;
width: 100%;
border-radius: $borderRadius;
}
.calculation-method {
background: linear-gradient(lighten($buttonColor, $lightUp), $buttonColor);
}
@include addPseudoClasses('.calculation-method', orangered);
h1 {
text-align: center;
margin: 20px 0 30px;
}
.attention {
background: linear-gradient(darken(deepPink, 20%), lighten(deepPink, 20%));
text-transform: uppercase;
}
@include addPseudoClasses('.attention', red);
.invalid-input {
border-color: red !important;
background-color: pink !important;
}<div class="wrap">
<div id="app"></div>
</div>工作实况演示在这里：http://codepen.io/mizech/pen/VKvNKX
到目前为止，一切都很顺利。但是现在我想要实现清晰的功能并且遇到问题。
当按钮“CLEAR”被点击时，我（尝试）使用this.setState（）将状态设置为初始值。
假设我在第一个文本框中输入了5，在第二个文本框中输入了4。然后我点击“添加”来计算总和。
然后我点击“清除”重置表单。执行“resetForm”方法。
我的状态期待成为：
[目标对象] {一：“输入一个数字！例如248'，aClass：“输入框”，b：'输入一个数字！例如1632' ，bClass： “输入盒”}
相反，它停留：
[对象的对象] {A：5，ACLASS： “输入盒”，B：4，bClass： “输入框”}
到目前为止，我的“forceUpdate”没有效果。
使用对象文本（this.setState（{一个：“输入号码”}）;）不工作太：如果我改变其状态接收作为道具应该太改变的状态下的元件
。但他们不...
我在做什么错在这里？ 如何将窗体重置为初始值？没有重新加载。
你说得对。但是，我有问题，文本框不能再写。因为React监视保持值等于状态。 –
CodePen不起作用。抱歉。只显示灰色背景。 –
但我想我现在已经明白了这个问题。谢谢。 –