0
126
ViewsCómo ingresar solo el número en forma de gancho de reacción
Estoy usando la forma de gancho de reacción para mis componentes de entrada, pero hay un problema. En algún campo de texto, por ejemplo, campo de texto para validación que solo toma un número, no sé cómo hacerlo, con textInput normal, podemos usar expresiones regulares, como
const [numberInput, setNumberInput] = useState("") function onTextChanged(value) { setNumberInput(value.replace(/[^0-9]/, "")) } y puse esa función y el valor del gancho en onTextChange y el value respectivamente, probé el mismo método anterior en el formulario de gancho de reacción, ¡pero no funcionará! Todavía puedo ingresar otros caracteres como "+" o "-", por supuesto usando el teclado numérico
Así que aquí está el componente TextField
export interface HTextFieldProps extends TextFieldProps { control: Control<any> name: string defaultValue?: string } /** * Describe your component here */ export const HTextField = function HookformTextField(props: HTextFieldProps) { const { name, control, defaultValue = "", ...restProps } = props return ( <Controller control={control} name={name} render={({ field: { onChange, value }, fieldState: { error } }) => ( <TextField {...restProps} onChangeText={onChange} value={value} defaultValue={defaultValue} error={(error && error.message) as TxKeyPath} /> )} defaultValue={defaultValue} /> ) }Aquí es cuando uso esto
<HTextField onChangeText={(value) => onTextChanged(value)} value={numberInput} name={"times"} control={control} autoCapitalize="none" keyboardType={Platform.OS === "android" ? "numeric" : "number-pad"} returnKeyType="done" inputStyle={INPUT_STYLE} required />Entonces, ¿cómo puedo usar solo el número en forma de gancho de reacción? Muchas gracias.
3 answers
Answer question0
Consulte los documentos (V7): https://react-hook-form.com/api/useform/register
<input type="number" {...register("test", { valueAsNumber: true, })} /> Si no usa type="number"
<input {...register("test", { valueAsNumber: true, pattern:{ value: /^(0|[1-9]\d*)(\.\d+)?$/ }, })} /> Todavía puedes usar validate .
<input {...register("test", { valueAsNumber: true, validate: (value) => value > 0, })} />0
usa algo como esto
const allowOnlyNumber=(value)=>{ return value.replace(/[^0-9]/g, '') } return ( <Controller control={control} name={name} render={({ field: { onChange, value }, fieldState: { error } }) => ( <TextField {...restProps} onChangeText={(text)=>onChange(allowOnlyNumber(text))} value={value} defaultValue={defaultValue} error={(error && error.message) as TxKeyPath} /> )} defaultValue={defaultValue} /> )0
Solución solo para números enteros
Simplemente puede establecer el type de propiedad <TextField /> en number y luego solo se permitirán números.
<Controller control={control} name={name} render={({ field: { onChange, value }, fieldState: { error } }) => ( <TextField {...restProps} onChange={onChange} value={value} fullWidth label="Times" defaultValue={defaultValue} type="number" error={error && error.message} /> )} defaultValue={defaultValue} /> 
Solución para ceros iniciales o exponente
Como se indica en los comentarios, aquí hay una versión que acepta también ceros a la izquierda o notación exponencial mediante el uso de la función de validación de RHF.
const validate = (value: string) => { const matches = value.match( /^(?:0\.(?:0[0-9]|[0-9]\d?)|[0-9]\d*(?:\.\d{1,2})?)(?:e[+-]?\d+)?$/ ); return matches?.length > 0 || "Not a Number"; }; return ( <Controller control={control} name={name} rules={{ validate }} render={({ field: { onChange, value }, fieldState: { error } }) => ( <TextField {...restProps} onChange={onChange} value={value} fullWidth label="Times" error={!!error} /> )} defaultValue={defaultValue} /> );