Question

我有一个重置按钮，它将所有输入字段（受控）的状态设置为初始状态。这适用于所有数字，但以下情况除外：

如果Input为0040，则单击restore不会将其重置为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" />

Answer 1

您可能想将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>
)
}

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

1 个答案: