| 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; |