我用React 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。然后我点击“添加”来计算总和。
之后我点击“CLEAR”重置表格。执行“resetForm”方法。
我希望州成为:
[object Object] {a:'输入一个数字!例如248',aClass:“input-box”,b:'输入一个数字!例如1632',bClass:“input-box”}
取而代之的是:
[object Object] {a:5,aClass:“input-box”,b:4,bClass:“input-box”}
之后我的“forceUpdate”没有效果。
使用对象文字(this.setState({a:'输入数字'});)也不起作用:
如果我改变状态,那么接收状态为道具的元素也应该改变。但他们没有......
我在这里做错了什么? 如何将表单重置为初始值?不进行重新加载。
答案 0 :(得分:2)
TextBox
组件正在接收道具value
,但您没有使用它,这就是它不能重新渲染的原因。
您的Textbox
组件应为
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>
);
}
});
和您的resetForm()
方法
resetForm: function() {
this.setState(this.INIT_STATE, () => console.log(this.state));
},
<强>段强>
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}
/>
</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);
},
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"
value={this.state.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"
value={this.state.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'));
&#13;
body {
background: linear-gradient(#c9c9c9, #969696);
}
.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: 6px;
}
.calculation-method {
background: linear-gradient(#99a3ff, #3347ff);
}
.calculation-method:visited, .calculation-method:hover {
color: white;
}
.calculation-method:hover {
background: linear-gradient(#ff8f66, orangered);
color: white;
}
.calculation-method:active {
opacity: 0.6;
}
h1 {
text-align: center;
margin: 20px 0 30px;
}
.attention {
background: linear-gradient(#ad005d, #ff7ac2);
text-transform: uppercase;
}
.attention:visited, .attention:hover {
color: white;
}
.attention:hover {
background: linear-gradient(#ff6666, red);
color: white;
}
.attention:active {
opacity: 0.6;
}
.invalid-input {
border-color: red !important;
background-color: pink !important;
}
&#13;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div class="wrap">
<div id="app"></div>
</div>
&#13;