"如何在 react-hook-form 中仅输入数字"

Question

I'm using react-hook-form for my input components, but there is one problem. In some text field, for example, text field for validation that take only number, i don't know how to do that, with normal textInput , we can use regex, like

 const [numberInput, setNumberInput] = useState("")
  function onTextChanged(value) {
    setNumberInput(value.replace(/[^0-9]/, "")) 
  }

and put that function and hook value on onTextChange and value respectively , i tried same method above on react-hook-form, but it won't work! i still can input other character like "+" or "-", of course using numeric keyboard

So here is TextField component

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

Here is when i use this

         <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
          />

So how can i use only number in react-hook-form look like this, thank you a lots

Answer 1

use something liket this

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

Answer 2

You can just set <TextField /> prop type to number and then there will be only numbers allowed.

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

Answer 3

Using react-hook-form v7 the this is working for me:

<input {...register('age', {
    pattern: {
        value: /^[0-9]+$/,
        message: 'Please enter a number',
    },
})} />

Answer 4

Check the docs (V7): https:\/\/react-hook-form.com\/api\/useform\/register<\/a>

<input
  type="number"
  {...register("test", {
    valueAsNumber: true,
  })}
/>