react 输入框只允许输入数字，小数点，只有两位小数，而且0在前面，鼠标焦点丢失时自动清除

在React中，要创建一个只允许用户输入特定格式数字（包括整数、小数点和最多两位小数，并且不允许在开头输入0）的输入框，你可以使用`useRef`和`useState`配合`pattern`属性以及`onBlur`事件处理函数。下面是一个简单的示例：

import React, { useRef, useState } from 'react';

const CustomNumberInput = () => {
  const inputRef = useRef(null);
  const [value, setValue] = useState('');

  // 正则表达式，用于验证输入是否符合条件
  const pattern = /^\d+(\.\d{1,2})?$/;

  const handleChange = (e) => {
    const inputValue = e.target.value;
    if (!pattern.test(inputValue)) {
      setValue(''); // 如果不符合条件，清空输入
    } else {
      setValue(inputValue); // 否则保留输入
    }
  };

  const onBlur = () => {
    // 当失去焦点时，再次检查并清理输入
    if (!pattern.test(value)) {
      setValue('');
    }
  };

  return (
    <input
      type="text"
      ref={inputRef}
      value={value}
      onChange={handleChange}
      onBlur={onBlur}
      pattern={pattern} {/* 使用正则作为pattern限制输入格式 */}
      maxLength={15} {/* 防止用户输入过长的数值 */}
      placeholder="只允许输入数字(最多2位小数)"
    />
  );
};

// 使用CustomNumberInput组件
<CustomNumberInput />

在这个例子中，当用户输入不符合规定格式的内容时，输入框会清空；如果用户离开输入框时仍有错误，同样会被清空。