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>
)
}
我有一个重置按钮,可以将所有输入字段(受控)的状态设置为初始状态。 这适用于所有数字,但以下情况除外:
如果输入为 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>
)
}