如何在reactjs中为数字输入字段设置默认值？答案

【问题标题】：how to set default value to numeric input field in reactjs?如何在reactjs中为数字输入字段设置默认值？
【发布时间】：2016-10-23 09:37:19
【问题描述】：

我正在处理一个示例 reactjs 表单，它有一个输入数字字段，如下所示：

<input type="number" name="quantity" 
  min="1" 
  step="1"
  value={this.state.userCount}
  onChange={this.handleUserCountChange}
/>

如何设置数值字段的默认值为5？

【问题讨论】：

【解决方案1】：

【讨论】：

【解决方案2】：

您可以在构造函数中设置状态。

constructor(props) {
  super(props);
  this.state = {
    userCount: 5
  };
}

【讨论】：

【解决方案3】：

您已将该数字输入的值设置为组件状态：

this.state.userCount

最初呈现此表单时，它将使用存储在 this.state.userCount 中的值填充输入。

就像其他海报提到的，你只需要设置初始状态：

React createClass 语法：

var TestForm = React.createClass({
  getInitialState() {
    return {
      userCount: 5
    };
  },
});

ES6/ES2015 类语法：

class TestForm extends React.Component {
 constructor(props) {
   super(props);
   this.state = {
    userCount: 5
   };
 }
}

【讨论】：