使用 React js 创建一个基本的表单计算器答案

【问题标题】：Creating a basic form calculator with React js使用 React js 创建一个基本的表单计算器
【发布时间】：2015-04-24 09:54:09
【问题描述】：

要创建一个具有动态计算和更新功能的 HTML 表单，比如说两个要相乘的输入，以及下面文本中显示的乘积，基本结构会是什么样子。即哪些数据将保持状态？是否应该使用任何 react mixin？

谢谢！

【问题讨论】：

请将我的解决方案标记为已接受的解决方案或建议如何改进。

标签： javascript html reactjs react-jsx

【解决方案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>
  );
},

然后，您需要一个名为 submit() 的 react 类上的函数，它可以像这样获取表单值：

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

【讨论】：

【解决方案2】：

与 Flux 反应 这是我的 github 存储库，希望它有助于理解与通量反应的基础知识 https://github.com/TameshwarNirmalkar/ES6Babel 它有：

网页包
ES6
通天塔
埃斯林特
反应
通量
用于休息 api 的 JSON 服务器
完成 CRUD 操作

希望对你有帮助。

【讨论】：