如何在 REACT.js 中的自定义递增-递减字段中启用手动值文本输入
How to enable manual value text input in custom increment-decrement field in REACT.js
我是新手,所以请多多包涵。我正在尝试创建自定义 increment/decrement 数量选择器。除了不允许我手动更改输入框的值外,一切都按照我的意愿进行。我不知道如何启用手动输入。
我想让用户能够使用 increment/decrement 按钮更改值或手动输入数值。提前致谢!!
const Quantity = ({max}) => {
const [qty, setQty] = useState(0)
let increaseQty = () => setQty(qty + 1)
let decreaseQty = () => setQty(qty - 1)
if(qty<=0){
decreaseQty = () => setQty(0)
}
if(qty>=max){
increaseQty = () => setQty(max)
}
return (
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty}/>
<Button onClick={increaseQty}> + </Button>
</div>
)
}
export default Quantity
问题是功能组件在渲染时只有 运行s 一次。因此,当此更改时,检查 0 或 max 的 if 语句将不会 运行。相反,如果您在函数体中包含 if 语句,那么每次函数被触发时它都会 运行。
你可以实现类似的东西:
const Quantity = ({ max }) => {
const [qty, setQty] = useState(0);
function decreaseQty() {
if (qty <= 0) {
setQty(0);
} else {
setQty(qrt - 1);
}
}
function increaseQty() {
if (qty >= max) {
setQty(max);
} else {
setQty(qrt + 1);
}
}
function onChange(e) {
const v = e.target.value;
if (v <= 0) setQty(0);
else if (v >= max) setQty(max);
else setQty(v);
}
return (
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty} onChange={(e) => onChange(e)} />
<Button onClick={increaseQty}> + </Button>
</div>
);
};
export default Quantity;
onChange={onChange}
是用户能够手动输入值所必需的。
import React, { useState } from "react";
const Quantity = ({ max }) => {
const [qty, setQty] = useState(0);
const decreaseQty = () => {
if (qty <= 0) {
setQty(0);
} else {
setQty(qty - 1);
}
};
const increaseQty = () => {
if (qty >= max) {
setQty(max);
} else {
setQty(qty + 1);
}
};
const onChange = (e) => {
const value = parseInt(e.target.value);
if (value >= 0 && value <= max) {
setQty(value);
}
};
return (
<div>
<button onClick={decreaseQty}> - </button>
<input type="text" onChange={onChange} value={qty} />
<button onClick={increaseQty}> + </button>
</div>
);
};
export default Quantity;
const Whosebug = ({max}) => {
const [qty, setQty] = useState(0)
let increaseQty = () => setQty((qty) => qty+ 1)
let decreaseQty = () => setQty(qty - 1)
if(qty<=0){
decreaseQty = () => setQty(0)
}
if(qty>=max){
increaseQty = () => setQty(max)
}
const manuallyUpdate = (event) => {
let newvalue=parseInt(event.target.value)
if(newvalue <= 0){
setQty(0)
}else if(newvalue >= parseInt(max)){
setQty(max)
}else{
setQty(newvalue)
}
}
return (
<Container maxWidth="lg" style={{paddingTop:"5%"}}>
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty} onChange={(e) => manuallyUpdate(e)}/>
<Button onClick={increaseQty}> + </Button>
</div>
</Container>
)
}
我是新手,所以请多多包涵。我正在尝试创建自定义 increment/decrement 数量选择器。除了不允许我手动更改输入框的值外,一切都按照我的意愿进行。我不知道如何启用手动输入。
我想让用户能够使用 increment/decrement 按钮更改值或手动输入数值。提前致谢!!
const Quantity = ({max}) => {
const [qty, setQty] = useState(0)
let increaseQty = () => setQty(qty + 1)
let decreaseQty = () => setQty(qty - 1)
if(qty<=0){
decreaseQty = () => setQty(0)
}
if(qty>=max){
increaseQty = () => setQty(max)
}
return (
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty}/>
<Button onClick={increaseQty}> + </Button>
</div>
)
}
export default Quantity
问题是功能组件在渲染时只有 运行s 一次。因此,当此更改时,检查 0 或 max 的 if 语句将不会 运行。相反,如果您在函数体中包含 if 语句,那么每次函数被触发时它都会 运行。
你可以实现类似的东西:
const Quantity = ({ max }) => {
const [qty, setQty] = useState(0);
function decreaseQty() {
if (qty <= 0) {
setQty(0);
} else {
setQty(qrt - 1);
}
}
function increaseQty() {
if (qty >= max) {
setQty(max);
} else {
setQty(qrt + 1);
}
}
function onChange(e) {
const v = e.target.value;
if (v <= 0) setQty(0);
else if (v >= max) setQty(max);
else setQty(v);
}
return (
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty} onChange={(e) => onChange(e)} />
<Button onClick={increaseQty}> + </Button>
</div>
);
};
export default Quantity;
onChange={onChange}
是用户能够手动输入值所必需的。
import React, { useState } from "react";
const Quantity = ({ max }) => {
const [qty, setQty] = useState(0);
const decreaseQty = () => {
if (qty <= 0) {
setQty(0);
} else {
setQty(qty - 1);
}
};
const increaseQty = () => {
if (qty >= max) {
setQty(max);
} else {
setQty(qty + 1);
}
};
const onChange = (e) => {
const value = parseInt(e.target.value);
if (value >= 0 && value <= max) {
setQty(value);
}
};
return (
<div>
<button onClick={decreaseQty}> - </button>
<input type="text" onChange={onChange} value={qty} />
<button onClick={increaseQty}> + </button>
</div>
);
};
export default Quantity;
const Whosebug = ({max}) => {
const [qty, setQty] = useState(0)
let increaseQty = () => setQty((qty) => qty+ 1)
let decreaseQty = () => setQty(qty - 1)
if(qty<=0){
decreaseQty = () => setQty(0)
}
if(qty>=max){
increaseQty = () => setQty(max)
}
const manuallyUpdate = (event) => {
let newvalue=parseInt(event.target.value)
if(newvalue <= 0){
setQty(0)
}else if(newvalue >= parseInt(max)){
setQty(max)
}else{
setQty(newvalue)
}
}
return (
<Container maxWidth="lg" style={{paddingTop:"5%"}}>
<div>
<Button onClick={decreaseQty}> - </Button>
<input type="text" value={qty} onChange={(e) => manuallyUpdate(e)}/>
<Button onClick={increaseQty}> + </Button>
</div>
</Container>
)
}