reactjs - 受控表单字段不遵守步骤

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。

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

标签： reactjsformssemantic-ui-react

Answer 1

尝试：

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