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

然后，你需要一个名为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 };
},

Answer 2

与Flux发生反应 这是我的github存储库希望它有助于理解与flux反应的基础 https://github.com/TameshwarNirmalkar/ES6Babel 它有：

的WebPack
ES6
巴别
Eslint
阵营
通量
Json-server for rest api
完成CRUD操作

希望它真的很有帮助。

使用React js创建基本表单计算器

2 个答案: