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

x6yk4ghg 于 2023-04-22 发布在 React

关注(0)|答案(5)|浏览(210)

我使用react-hook-form作为我的输入组件，但有一个问题。在一些文本字段中，例如，只接受数字的文本字段验证，我不知道如何做到这一点，对于普通的textInput，我们可以使用正则表达式，如

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

然后把这个函数和钩子值分别放在onTextChange和value上，我在react-hook-form上试了同样的方法，但是不行！我仍然可以输入其他字符，比如“+”或“-”，当然是用数字键盘
这是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}
    />
  )
}

这是我用这个的时候

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

所以我怎么能在react-hook-form中使用only number呢，看起来像这样，非常感谢

react-native

来源：https://stackoverflow.com/questions/69370034/how-to-input-only-number-in-react-hook-form

5条答案

按热度按时间

tnkciper1#

查看文档（V7）：https://react-hook-form.com/api/useform/register

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

如果不使用type="number"

<input
  {...register("test", {
    valueAsNumber: true,
    pattern:{
       value: /^(0|[1-9]\d*)(\.\d+)?$/
    },
  })}
/>

您可以使用validate。

<input
  {...register("test", {
    valueAsNumber: true,
    validate: (value) => value > 0,
  })}
/>

赞(0）回复(0）举报 2023-04-22

pnwntuvh2#

仅整数解

你可以只设置<TextField /> prop type到number，然后只允许数字。

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

前导零或指数的解决方案

正如注解中所指出的，这里是一个版本，通过使用RHF的validate函数，也接受前导零或指数符号。

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

赞(0）回复(0）举报 2023-04-22

j8yoct9x3#

用这样的东西

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）回复(0）举报 2023-04-22

f0ofjuux4#

使用react-hook-form v7，这对我来说是有效的：

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

赞(0）回复(0）举报 2023-04-22

x33g5p2x5#

虽然来晚了点但我做到了

<Controller
                  control={control}
                  {...register(`userPreferredStakes.${x}.prefStake`)}
                  name={`userPreferredStakes.${x}.prefStake`}
                  render={({ field: { onChange, onBlur, value } }) => (
                    <TextField
                     id="standard-basic" 
                     placeholder="Stake(£)" 
                     variant="standard"
                     type='number' 
                     value={getValues(`userPreferredStakes.${x}.prefStake`)} 
                     onChange={(e) => onChange(+e.target.value)}
                    />
                  )}
                />

注意：type='number' & onChange={（e）=〉onChange（+e.target.value）}`允许我保存项目，当记录保存的数据时，我会得到以下信息。

userPreferredStakes:Array(13)
0:{oddsLow: 0, oddsHigh: 2, prefStake: 300}
1: {oddsLow: 2.01, oddsHigh: 3, prefStake: 200}
  ....

而如果不在onChange中添加+，

userPreferredStakes:Array(13)
0:{oddsLow: 0, oddsHigh: 2, prefStake: '300'}
1: {oddsLow: 2.01, oddsHigh: 3, prefStake: '200'}
  ....

赞(0）回复(0）举报 2023-04-22

我来回答

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

5条答案

相关问题

热门标签

最新问答