toto10's picture
5abb6291403b19368a3b842ea4f13b1f23694d90948b2da0ae23e85acf2bb1e9
fb54f6e
raw
history blame
900 Bytes
import React, {useState} from "react";
import {
Button,
TextField
} from '@mui/material';
const NumberInput = () => {
const [value, setValue] = useState(0);
const handleDecrease = () => {
setValue(value - 1);
};
const handleIncrease = () => {
setValue(value + 1);
};
const handleChange = (event) => {
const newValue = parseInt(event.target.value);
if (!isNaN(newValue)) {
setValue(newValue);
}
};
const containerStyle = {
display: "flex",
justifyContent: "space-between",
alignItems: "center"
};
return (
<div style={containerStyle}>
<Button onClick={handleDecrease}>-</Button>
<TextField value={value} onChange={handleChange}/>
<Button onClick={handleIncrease}>+</Button>
</div>
);
};
export default NumberInput;