后台
- 我想做一个数字输入。
- 此自定义输入仅接受数字,并有字符长度限制。
- 将使用react-hook-form。
import React, { useEffect, useState } from "react";
type NumberInputProps = {
_maxLength?: number;
name: string;
className?: string;
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
placeholder?: string;
value?: string;
};
const NumberInput = ({ _maxLength, className, name, onChange: handleChange, placeholder, value }: NumberInputProps) => {
const [val, setVal] = useState(value);
useEffect(() => {
setVal(value);
}, [value]);
const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
alert("handleInput !");
let value = e.target.value;
if (_maxLength && value.length >= _maxLength) {
value = value.slice(0, _maxLength);
}
setVal(value);
handleChange?.(e);
};
const cn = `number-input ${className}`;
return (
<input name={name} className={cn} type="number" onInput={handleInput} placeholder={placeholder} value={val} />
);
};
export default NumberInput;
字符串
问题
正如你所看到的,这个组件是受控组件。但是我不想使用useState
,useEffect
,因为它使代码太长。
有没有更简单、更直观的方法?
3条答案
按热度按时间o7jaxewo1#
我看不出使用
useEffect()
有什么价值。将代码改为:字符串
注意事项:
handleChange()
的签名被修改,因为我们现在给它的是value
,而不是事件e
。你可以给予它e
,但是你需要在handleInput()
中复制“值截断”逻辑。ou6hu8tu2#
你正在使用react-hook-form。所以我想不再需要
useStates
了。我想你可以做一些简单的事情,比如这样(如果你愿意,你也可以创建一个公共组件)。字符串
qyzbxkaa3#
当使用react-hook-form时,大部分代码都不需要。如果你愿意让生活变得更快更简单,这里有一个使用react-hook-form和prime-react的工作示例。
这两个库可以很好地协同工作,并且有很好的文档说明如何使用它们(有一些额外的css导入模板,使一切看起来很花哨,但这些并不需要)。
字符串
对于仅限于HTML属性的常规输入,逻辑仍然非常类似