Formik 导致 MUI 数字文本字段失去焦点

Question

当我将 formik 值绑定到类型为“数字”的文本字段时，任何手动输入数字的尝试，例如文本字段中的 14 允许您输入单个数字，例如1 然后它会失去对输入的焦点并添加下一个数字 (4)，您必须单击输入以再次重新聚焦它。

当我删除 value={formik.values.newValue} 和 onChange={formik.handleChange} 时，您可以再次在输入中自由键入。这表明所看到的行为与 formik 对文本字段的绑定或影响有关。

该字段设置为具有默认值、最小值和最大值，该值是从配置文件中检索的，该文件以以下格式返回字段数值：

const Data: Data = {
    name: "Test Name",
    dataType: DataType.Number,
    default: 50,
    lowerBoundary: 0,
    upperBoundary: 100
  };

我创建了一个代码沙箱来演示我的实现，但我想解决上述字段失去焦点的问题，以便用户可以一次性自由输入完整的数字。

Answer 1

上述评论回答了这个问题，链接的答案有助于提供有关原因的详细信息。最终，我不得不删除该方法：

const NumberInputComponent: React.FC<NumberInputComponentProps> = ({
    label,
    Data,
    min,
    max,
    default: defaultValue
  }) => (
    <FormControl fullWidth>
      <TextField
        id="newValue"
        name="newValue"
        label={label}
        type="number"
        value={formik.values.newValue}
        onChange={formik.handleChange}
        inputProps={{
          min: { min },
          max: { max }
        }}
        error={
          Number(formik.values.newValue) < Number(min) ||
          Number(formik.values.newValue) > Number(max)
        }
        helperText={
          Number(formik.values.newValue) < Number(min)
            ? `Below minimum: ${min}`
            : Number(formik.values.newValue) > Number(max)
            ? `Above maximum: ${max}`
            : ""
        }
      />
      <FormHelperText>
        <p>
          <b>Minimum</b> {min} <b>Maximum</b> {max}{" "}
        </p>
        <p>
          <b>Default</b> {defaultValue}{" "}
        </p>
      </FormHelperText>
    </FormControl>
  );

并获取文本字段并将其放置在我的表单中，而不是通过方法生成它，以阻止它在用户每次键入时返回新字段，从而失去对该字段的焦点。