学习反应挂钩,我正在修饰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'));
最佳答案
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
时,它可以正常打印。
关于javascript - react 钩子(Hook)技术来区分输入数字事件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58663518/