ReactJS - 当状态变量为数字时,SetState 不更新状态

ReactJS - SetState does not update the state when the state variable is a number

我有一个重置按钮,可以将所有输入字段(受控)的状态设置为初始状态。 这适用于所有数字,但以下情况除外:

如果输入为 0040,单击还原不会将其重置为 40。 如果它是一个字符串,这可能有效,但如果状态变量是一个数字,有没有办法更新它。

class Example extends React.Component {
  state = {
    code1: 40,
    code2: 60,
    code3: 70,
  }
  
  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  }
  
  handleReset = () => {
    this.setState({
      code1: 40,
      code2: 60,
      code3: 70,
    });
  }

  render() {
    return (
      <div>
        <div>
          <input 
            type="number" 
            name="code1"
            value={this.state.code1} 
            onChange={this.handleChange} 
            min="0" 
            max="100" 
          />
        </div>
        <div>
          <input 
            type="number" 
            name="code2"
            value={this.state.code2} 
            onChange={this.handleChange} 
            min="0" 
            max="100" 
          />
        </div>
        <div>
          <input 
            type="number" 
            name="code3"
            value={this.state.code3} 
            onChange={this.handleChange} 
            min="0" 
            max="100" 
          />
        </div>
        <button onClick={this.handleReset}>Reset</button>
      </div>
    )
  }
}

ReactDOM.render(<Example/>, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root" />

您可能希望将 toString() 用于 input value 而不是将 String 存储在状态中。试试这个 demo

render() {
return (
  <div>
    <div>
      <input
        step="1"
        type="number" 
        name="code1"
        value={this.state.code1.toString()} 
        onChange={this.handleChange} 
        min="0" 
        max="100" 
      />
    </div>
    <div>
      <input 
        type="number" 
        name="code2"
        value={this.state.code2.toString()} 
        onChange={this.handleChange} 
        min="0" 
        max="100" 
      />
    </div>
    <div>
      <input 
        type="number" 
        name="code3"
        value={this.state.code3.toString()} 
        onChange={this.handleChange} 
        min="0" 
        max="100" 
      />
    </div>
    <button onClick={this.handleReset}>Reset</button>
  </div>
)
}