javascript - 除非刷新页面,否则“重置”按钮将不起作用,否则会给我一个错误(React.JS)
问题描述
所以我在 React.JS 中工作,我正在尝试制作类似于输入字段的东西,用户可以在其中输入他们选择的数字,它会显示在文本中。
我决定添加一个“重置为零”按钮作为扩展。
<div>
Count: {this.state.value}
<form>
<input type="number" value = {this.state.value} onChange = {this.inputChange}/>
<br/>
<button onClick = {this.reset}>reset to zero</button>
</form>
</div>
它可以工作,但每次它都会刷新页面。
我在线阅读,我决定将“type = button”添加到我的按钮中:
<button type="button" onClick = {this.reset}>reset to zero</button>
当我再次运行我的代码时,它仍然会正常增加,但是当我单击按钮时,什么也没有发生,当我尝试再次增加它时,我收到一个错误,“TypeError: this.setState is not a function”。
错误来自此方法:
inputChange = event => {
this.setState ({value: event.target.value})
}
我知道错误来自哪里,但我不知道它为什么会发生,或者如何解决它(请注意,我也是 JavaScript 和 React.JS 的初学者)
我希望有一个人可以帮助我。
这是我的完整代码,供参考。
class Slider extends React.Component {
constructor(props){
super(props);
this.state = {
value: 0
}
}
inputChange = event => {
this.setState ({value: event.target.value})
}
reset = () => {
this.setState = ({
count: 0
})
}
render() {
return (
<div>
Count: {this.state.value}
<form>
<input type="number" value = {this.state.value} onChange = {this.inputChange}/>
<br/>
<button type = "button"onClick = {this.reset}>reset to zero</button>
</form>
</div>
);
}
}
谢谢各位,提前。
解决方案
重置时没有任何反应并且您在输入更改时收到该错误的原因是您this.setState
在重置函数中重新分配而不是调用它。此外,您正在设置count
而不是value
,这将导致设置错误的状态。
这就是您的重置功能应该是什么:
reset = () => {
this.setState ({
value: 0
})
}
当你调用 时this.setState
,React 会在你的组件中触发一个新状态的重新渲染。
当您单击重置时,目前没有发生这种情况。在您随后调用 inputChange 时,this.setState
已使用对象重新分配,并且不再可调用,从而引发该错误。
推荐阅读
- python - 使用 Python Selenium 在阴影根中选择元素
- visual-studio-code - 如果当前文件正在编辑而不保存,我如何获得提示?
- python - 烧瓶中的函数未返回有效响应
- hyperledger-fabric - Hyperledger Fabric - 不运行节点的组织的身份
- android - 深度链接:Uri Schema 检查 Android/iOS 应用是否已安装
- python - 如何在条形图中标记部分
- configuration - 如何为 Quarkus 扩展编写对象列表的配置
- android - HMS 站点套件在某些设备中无法使用,错误代码为 6004
- php - 我需要使用代码所在的 Bootstrap 进行分页
- python - pandas 中每个聚合组或规则的最常见值