[英]react native text input
我有一个组件
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>
但是当我输入值时,alert vorks,但是 onChangeText={(text) => setNumSets(text)} 和其他人看不到我的输入,为什么
我应该如何更改警报工作和所有 onChangeText={(text) => setNumSets(text)} 下一个输入看到我的输入?
我现在不知道如何尝试更多来解决这个问题或创建当前输入
这样做:
<AppTextInput icon="timer-sand" placeholder={"Prep Time"} keyboardType='numeric' setPrepTime={setPrepTime}/>
并在 appTextInput 中修改如下:
export default function AppTextInput({icon, placeholder,onChangeText,setPrepTime ...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];
setPrepTime(newText)
} 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>
)
}
进行此更改
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];
onChangeText(text)
} 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={onChanged} maxLength={3} {...otherProps}
/>
</View>
)
}
使用:在值标签中添加您的 state 变量
<View style={{top: -80}}>
<AppTextInput icon="timer-sand" placeholder={"Prep Time"} keyboardType='numeric' value={prepTime} onChangeText={setPrepTime}/>
<AppTextInput icon="timer" placeholder={"Round Duration"} keyboardType='number-pad' value={roundDuration} onChangeText={setRoundDuration}/>
<AppTextInput icon="timer" placeholder={"Break Duration"} keyboardType='number-pad' value={breakDuration} onChangeText={setBreakDuration}/>
<AppTextInput icon="repeat" placeholder={"Number of Rounds"} keyboardType='number-pad' value={numRounds} onChangeText={setNumRounds}/>
<AppTextInput icon="format-list-numbered" placeholder={"Number of Sets"} keyboardType='number-pad' value={numSets} onChangeText={setNumSets}/>
{exerciseInputEles}
</View>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.