受控表格字段不遵守步骤

Question

数字类型控制的表单字段不遵守指定的步骤。每次点击都会使步骤增加两次。

我已经尝试更新到最新的语义UI反应版本。我曾尝试删除“控制”道具，但这是必需的。

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;

我希望数字输入组件中的箭头增加0.01。

实际行为是每次点击增加两次。

Answer 1

尝试：

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