我有一个组件,使用这个组件我无法写出正确的输入,所以只能输入数字,没有,.等等,请帮助componentuse of component
我的组件
export default function AppTextInput({icon, placeholder,onChangeText, ...otherProps}) {
const onChanged =(text) =>{
let newText = '';
let numbers = '0123456789';
for (var i=0; i < text.length; i++) {
if (numbers.indexOf(text[i]) > -1) {
newText = newText + text[i];
} else {
alert("please enter integer numbers only");
}
}
}
return (
<View style={styles.container}>
{icon &&
<MaterialCommunityIcons style={{marginRight: 10}} name={icon} color={colors.grayMedium} size={20}/>}
<TextInput style={defaultStyles.text} placeholder={placeholder}
onChangeText={(text)=> onChanged(text)} maxLength={3} {...otherProps}
></TextInput>
</View>
)
}
组件使用
<View style={{top: -80}}>
<AppTextInput icon="timer-sand" placeholder={"Prep Time"} keyboardType='numeric' onChangeText={(text) => setPrepTime(text)}/>
<AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' onChangeText={(text) => setRoundDuration(text)}/>
<AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' onChangeText={(text) => setBreakDuration(text)}/>
<AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad' onChangeText={(text) => setNumRounds(text)}/>
<AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' onChangeText={(text) => setNumSets(text)}/>
{exerciseInputEles}
</View>
我尝试了这个解决方案,但它没有工作,我想我不明白在什么地方把和如何使用,它开始工作。
3条答案
按热度按时间nmpmafwu1#
首先,onChange事件处理程序的参数不是输入的新值,而是一个事件对象。
u91tlkcl2#
我试着那样做但是
当我输入时,警报工作,但是onChangeText={(text)=〉setNumRounds(text)}和其他人看不到我输入,为什么?
olhwl3o23#
下面是您可以使用的代码:
1.我将
onChanged
函数移到另一个文件中,并使用Regex
将非数字字符替换为空字符串。除此之外,我将
onChangeText
的输入值从(text)=> onChanged(text)
更改为onChangeText
(这是 prop ),因为onChanged
不再存在。1.这里我添加了一个名为
replaceNonNumeric
的函数,该函数用于将任何非数字的数字替换为空字符串,这样就只有数字在里面了。1.我在您更改状态之前调用了
replaceNonNumeric
,并将新值传递给setState
。