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

Question

要创建一个包含动态计算和更新的HTML表格，只需说明两个要与以下文本呈现的产品相乘的输入，基本结构将如何。即哪些数据将保持在状态？是否应该使用任何反应混合物？

谢谢！

Answer 1

该组件应该将两个数字的乘积作为状态。你可以在DOM中保存这两个数字的值，因为你有你的表单。

您需要在呈现反应组件的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> 
); 
}, 

然后，你需要在你的反应类叫做提交（函数）是获取表单值这样的：

var num1 = this.refs.num1.getDOMNode().value.trim(); 
var num2 = this.refs.num2.getDOMNode().value.trim(); 

然后你应该乘并将其存储为状态：

this.setState({ product: num1 * num2 }); 

请确保您使用getInitialState（）和产品初始化为空：

getInitialState: function() { 
    return { product: null }; 
}, 

Answer 2

阵营与流量 这里是我的github仓库希望它会有助于理解基本与焊剂反应 https://github.com/TameshwarNirmalkar/ES6Babel 它具有：

• 的WebPack
• ES6
• 通天
• Eslint
• React
• 流量
• JSON-服务器REST API
• 完整的CRUD操作

希望这将是很有益的。