Контролируемое поле формы не соответствует шагу

Question

Поле с типом контролируемого числа не соответствует указанному шагу. Он увеличивает шаг в два раза для каждого клика.

Я попытался обновить его до последней версии semantic-ui-реагировать. Я попытался удалить опору 'control', но это необходимо.

import React from 'react';
import {
  Form,
  Input,
} from 'semantic-ui-react';

function CreateProduct() {
  const [loading, setLoading] = React.useState(false);
  const [disabled, setDisabled] = React.useState(false);
  const [product, setProduct] = React.useState({
    name: '',
    price: '',
    media: '',
    description: '',
  });

  function handleChange(event) {
    const { name, value, files } = event.target;
    setProduct(prevState => ({ ...prevState, [name]: value }));
  }

  return (
    <>
      <Form>
        <Form.Group widths='equal'>
          <Form.Field
            control={Input}
            name='price'
            label='Price'
            placeholder='Price'
            min='0.00'
            step='0.01'
            type='number'
            value={product.price}
            onChange={handleChange}
          />
        </Form.Group> 
      </Form>
    </>
  );
}

export default CreateProduct;

Я ожидаю, что стрелки в числовом компоненте Input увеличатся на 0,01.

Фактическое поведение таково, чтооно увеличивается вдвое за каждый клик.

Answer 1

Попробуйте:

function handleChange(event) {
    event.preventDefault();    <--  add this line
    const { name, value, files } = event.target;
    setProduct(prevState => ({ ...prevState, [name]: value }));
  }