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不起作用。抱歉。只顯示灰色背景。 –
但我想我現在已經明白了這個問題。謝謝。 –