要创建具有动态计算和更新的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 };
},

09-17 19:14
查看更多