javascript - 使用 React js 创建一个基本的表格计算器

Question

要创建一个具有动态计算和更新的 HTML 表单，假设只有两个输入要相乘，乘积在下面的文本中显示，基本结构是什么样的。即哪些数据将保持状态？是否应该使用任何反应混入？

谢谢!

Answer 1

此组件应将两个数字的乘积保存为状态。您可以在 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 类中使用一个名为 submit() 的函数来获取如下表单值:

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 };
},