ReactJS - SetState не обновляет состояние, когда переменная состояния является числом - PullRequest
Новая
       11

ReactJS - SetState не обновляет состояние, когда переменная состояния является числом

3 голосов
/ 07 апреля 2020

У меня есть кнопка сброса, которая устанавливает состояние всех полей ввода (контролируемых) в исходное состояние. Это хорошо работает со всеми числами, за исключением следующего сценария:

Если ввод равен 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" />

1 Ответ

1 голос
/ 07 апреля 2020

Вы можете использовать toString() для своего input value вместо хранения String в состоянии. Попробуйте это демо 

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>
)
}
...