javascript - react 钩子(Hook)技术来区分输入数字事件？

Question

学习反应挂钩，我正在修饰input type="number"字段。

使用向上/向下按钮/箭头时，我想通过四舍五入，钳位和填充来设置值的格式（最终我也希望在模糊，粘贴和去抖动时设置格式）。

如果输入是通过键盘（也就是文本/数字）生成的，则不应应用任何格式。

我没有工作的尝试（和下面的代码包含在内）：
https://codepen.io/jedierikb/pen/PooENwp?editors=1010

我的方法存在问题：


我使用黑客（寻找event.nativeEvent.inputType）来区分键事件和增量/减量事件。正确的方法是什么？

const useNumberFieldPadding = (props, callback) => {

  const [input, setInput] = React.useState( props.init );

  const handleInputChange = e => {
    const v = e.target.value;

    //HACK - differentiate between native Event and InputEvent
    if (e.nativeEvent.inputType) {
      setInput( v );
    }
    else {

      //round, clamp, and pad
      const vi = _.round( v, 0 );
      const vic = _.clamp( vi, 0, 59 );
      const pv = _.padStart( vic, 2, 0 );
      setInput( pv );
    }
  }

  const handleKeyDown = e => {
    if (e.which === 38 || e.which === 40) {
      //a way to track if we are using the up and down arrows...
    }
  }

  return [
    handleInputChange,
    handleKeyDown,
    input
  ];
}

function NumberField( props ) {
  const [handleInputChange, handleKeyDown, input] = useNumberFieldPadding( props );
  return (
    <input
      type="number" 
      value={input}
      min={props.min}
      max={props.max}
      step={props.step}
      onKeyDown={e => handleKeyDown(e)}
      onChange={e => handleInputChange(e)}
      />
  );
}

ReactDOM.render(<NumberField init="06" step="10" min="-1" max="99"/>, document.getElementById('x'));

Answer 1

1）按下一个键时，在输入字段中触发了两个事件。按键事件和值更改事件。但是，nativeEvent在两种情况下似乎都为null。因此，您将需要先捕获键事件并执行preventDefault()，以便不会触发handleChange函数。

2）这很有趣。看起来step属性将初始值作为min属性中的值，而不是基于当前值。

您的组件会创建类似这样的内容

<input type="number" init="06" step="10" min="-1" max="99" />

当您在此元素中递增时，它将第一次执行 -1 + 10 = 9。之后，一切都是 current value + 10

要解决此问题，您需要正确设置最小值。因此，如果要从10开始，请以 min="0"开头

3）输入元素上有一个 onPaste事件。您可以在其中添加侦听器。在 Web MDN上查看更多信息

编辑2019年11月1日至1日
事件对象本身具有空的 nativeEvent，但是使用 event.nativeEvent时，它可以正常打印。