尝试擦除时删除内部输入的零

Question

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

我的组件：

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}
  />);
 };

Answer 1

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

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

另请参阅question/answer...