[英]How to let the user input number and increase it with a button in React JS
我想让用户输入clicks
次数并用一个按钮增加它,但我不知道怎么做。 这是代码。
import React, { Component } from "react";
class Click extends Component {
constructor(props) {
super(props);
this.state = {
clicks: 0,
show: true,
};
}
IncrementItem = () => {
this.setState({ clicks: this.state.clicks + 1 });
};
DecreaseItem = () => {
if (this.state.clicks < 1) {
this.setState({
clicks: 0,
});
} else {
this.setState({
clicks: this.state.clicks - 1,
});
}
};
ToggleClick = () => {
this.setState({ show: !this.state.show });
};
handleChange(event) {
this.setState({ clicks: event.target.value });
}
render() {
return (
<div>
<button onClick={this.DecreaseItem}>Click to decrease by 1</button>
<button onClick={this.IncrementItem}>Click to increase by 1</button>
<button onClick={this.ToggleClick}>
{this.state.show ? "Hide number" : "Show number"}
</button>
{this.state.show ? ( <input type="number" name="clicks" value={this.state.clicks}onChange = {this.handleChange.bind(this)}/>) : (" ")}
</div>
);
}
}
export default Click;
您需要将event.target.value
转换为数字,然后将其保存在 state 中,否则它只是保存为字符串
handleChange(event) {
this.setState({ clicks: Number(event.target.value) });
}
还将输入值字段替换为value={Number(this.state.clicks).toString()}
以便它不会继续显示前导0
您的组件似乎按原样工作,无需任何更改。 如果我将它粘贴到 Codesandbox 中,它就可以工作。
不过,有一些清理的机会。 例如,React 已经远离 class 组件,现在几乎完全使用function 组件来利用React Hooks 。
这是您的组件的重构版本:
import React, { useState } from "react";
function Click() {
const [count, setCount] = useState(0);
const [isVisible, setIsVisible] = useState(true);
const decrementCount = () => {
if (count > 0) setCount(count - 1);
};
const incrementCount = () => {
setCount(count + 1);
};
const toggleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<div>
<button onClick={decrementCount}>Click to decrease by 1</button>
<button onClick={incrementCount}>Click to increase by 1</button>
<button onClick={toggleVisibility}>
{isVisible ? "Hide number" : "Show number"}
</button>
{isVisible && (
<input
type="number"
name="clicks"
value={count}
onChange={(event) => {
setCount(event.target.value);
}}
/>
)}
</div>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.