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

Question

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

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

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

Answer 1

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

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

Answer 2

您需要将userCount的初始状态设置为5来检查文档： https://facebook.github.io/react/tutorial/tutorial.html#an-interactive-component

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