尝试擦除时删除输入中的零

Remove zero inside input when try to erase

本文关键字：输入 删除 擦除      更新时间：2023-09-26

我有一个反应组件，它是类型号的输入字段。当我在里面按随机数时，一切都可以正常工作，但是当我想擦除所有内容时，输入字段中总是有一个我无法擦除的零。是否可以空白输入字段，以便在擦除所有内容时零消失？

我的组件：

const NumberBox = (props) => {
  const onChanged = (event) => {
    props.onChange(+event.target.value);
  };
  const styles = {
    inputGeneral: {
    border: '0px',
    width: '100%',
    padding: '8px 16px',
    fontSize: '1.6em' } };
  return (
   <input
    style={styles.inputGeneral}
    type="number" 
    pattern="[0-9]*"
    value={props.value}
    onChange={onChanged}
  />);
 };

发生这种情况是因为与 Chromium 中的 HTML5 数字输入类型相关的行为（可能还有其他浏览器）......

最简单的解决方案应该是使用text输入类型并手动验证/格式化您的输入...

另请参阅此问题/答案...

相关文章：