要创建具有动态计算和更新的HTML表单,只需说两个要相乘的输入以及下面文本中显示的乘积,基本结构将是什么样。即哪些数据将保持状态?是否应该使用任何反应混合素?
谢谢!
最佳答案
此组件应将两个数字的乘积作为状态。由于具有表单,因此可以在DOM中保留两个数字的值。
您需要在react组件的呈现中使用html表单。渲染可能看起来像这样:
render: function() {
var product = '';
if (this.state.product) {
product = <p>{this.state.product}</p>;
}
return (
<div>
{product}
<form onSubmit={this.submit}>
<input type="text" ref="num1" className="form-control" placeholder="First number"></input>
<input type="text" ref="num2" className="form-control" placeholder="Second number"></input>
<button type="submit" className="btn btn-danger">Delete</button>
<button type="reset" className="btn btn-default">Cancel</button>
</form>
</div>
);
},
然后,您需要在React类上的一个函数称为commit(),该函数获取如下形式的值:
var num1 = this.refs.num1.getDOMNode().value.trim();
var num2 = this.refs.num2.getDOMNode().value.trim();
然后,您应该将它们相乘并将其存储为状态:
this.setState({ product: num1 * num2 });
确保使用getInitialState()并将产品初始化为null:
getInitialState: function() {
return { product: null };
},