如何设置TextInput的最小值和最大值

Question

作为示例，我想将最小值指定为 5000，将最大值指定为 200000，在这些值之间用户可以输入，如果不在之间用户则无法输入。

Answer 1

这是一个完整的示例（https://snack.expo.dev/zlwWokoFK）。

执行此操作的方法是，如果文本长度低于或高于限制，则不让文本更新。在

onChangeText

函数中。

下面是代码

import * as React from 'react';
import { Text, View, TextInput } from 'react-native';


export default function App() {

  /* 
    Specify your upper and lower limits of length
  */
  const LOWER_LIMIT = 10;
  const HIGHER_LIMIT = 20;

  /* 
    State for the text
  */
  const [text, setText] = React.useState("ab".repeat(LOWER_LIMIT/2));

  /* 
    Function to update the text 
  */
  const onChangeText = (newText)=>{
    /* 
      If text is above or below length of limits then exit function
    */
    if (newText.length < LOWER_LIMIT || newText.length>HIGHER_LIMIT){
      return;
    }
    // Else update text
    setText(newText);
  }


  return (
    <View style={{
      flex:1,
      justifyContent:"center",
      }}>
        <TextInput
         onChangeText={value=>onChangeText(value)}
         multiline
         value={text}
         style={{
          height: 400,
          margin: 12,
          borderWidth: 1,
          padding: 10,
        }}
        />
    </View>
  );
}

Answer 2

 const handleInputChange = (text) => {
 // parse the input value as a number
 const numericValue = parseFloat(text);

 const min = 5000;
 const max = 200000;

 if (!isNaN(numericValue)) {
   const clampedValue = Math.min(Math.max(numericValue, min), max);
   // set state
   setValue(clampedValue.toString());
 }}