如何将最小值和最大值设置为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

您可以在TextInput中使用editable = {false}。例如：

<View pointerEvents="none">
<TextInput value="I am read only" editable={false} />
</View>

因此，在这里使用State作为可编辑的布尔值，并根据您的条件设置、取消设置。