Блог

Я пытаюсь использовать spinbox в своем коде, но всякий раз, когда я пытаюсь изменить значения с помощью onChange, приложение аварийно завершает работу. Я также пытался использовать onValueChange, но он игнорируется, и я не знаю, в чем проблема:

item.js

 import NumericInput from "react-numeric-input";
import { Row, Col, ListGroup } from "react-bootstrap";

function ItemScreen() {
 
  const [qty, setQty] = useState(1);

  return (
    <div>
      <h2 className="text-center mb-3">Order</h2>
      <hr></hr>
      <Row>
        <Col md={8}>
          <ListGroup variant="flush">
            <ListGroup.Item>
              <Row>
                  <Col>Apple</Col>
                <Col>
                  <NumericInput
                    min={1}
                    max={100}
                    onChange={(e) => setQty(e.target.value)}
                    value={qty}
                  />
                </Col>
                <Col>
                  500 x {qty} = {qty * 500}
                </Col>
              </Row>
            </ListGroup.Item>
          </ListGroup>
        </Col>
      </Row>
    </div>
  );
}

export default ItemScreen;
 

событие NumericInput компонента просто возвращает числовое значение, так что, я думаю, вы можете это сделать :

 <NumericInput
   min={1}
   max={100}
   onChange={(value) => setQty(value)}
   />
 

Значение всегда будет иметь тип string.

Поэтому вам нужно использовать его в качестве числа.

 onChange={(e) => setQty(Number(e.target.value))}