受控数字类型表单字段未遵循指定step，单次点击递增两次

我之前也碰到过类似的情况，结合你的代码来看，这个问题主要是组件事件冲突和状态类型不匹配导致的，下面给你两种可行的解决方案：

原因分析 #

1. 双重事件触发：当你用Form.Field配合control={Input}时，Form.Field会把props传递给内部的Input组件，但同时可能存在重复的事件监听——Form.Field和Input各自触发了一次onChange，导致状态被更新两次，最终表现为点一次箭头却递增了两次step值。
2. 类型不匹配：你的product.price初始值是字符串''，但type="number"的输入框期望绑定的是数字类型的值。这种类型不一致会让浏览器的原生行为和React的受控状态同步出现异常，进而触发多次状态更新。

解决方案1：使用Form.Input替代嵌套结构 #

Semantic UI React提供了封装好的Form.Input组件，它已经处理了Form.Field和Input的内部事件逻辑，能直接避免双重触发的问题。修改后的代码如下：

import React from 'react';
import { Form } 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.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;

解决方案2：统一状态类型并优化事件处理 #

如果需要保留Form.Field + control={Input}的结构，可以通过将price的状态类型统一为数字，解决类型不匹配的问题：

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);
  // 初始化price为数字0，确保类型匹配
  const [product, setProduct] = React.useState({
    name: '',
    price: 0,
    media: '',
    description: '',
  });

  function handleChange(event) {
    const { name, value, files } = event.target;
    let updatedValue = value;
    // 针对price字段，将输入值转换为数字类型
    if (name === 'price') {
      updatedValue = value ? parseFloat(value) : 0;
    }
    setProduct(prevState => ({ ...prevState, [name]: updatedValue }));
  }

  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;

这两种方案都能解决你遇到的点击箭头递增两次的问题，优先推荐第一种，因为它更符合Semantic UI React的组件设计规范，代码也更简洁。

内容的提问来源于stack exchange，提问作者Michael Friedman