[英]Current Text Input React Native
我有一個組件並使用該組件我無法編寫正確的輸入,因此您只能輸入沒有 , 的數字。 等等,請幫助組件使用組件
我的組件
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>
我嘗試了這個解決方案,但它沒有用,我想我不明白放在什么地方以及如何使用它開始工作。
首先,onChange 事件處理程序的參數不是輸入的新值,而是事件 object。您可以通過執行以下操作來訪問該值:
onChange(event) {
let text = event.target.value;
...
我試着那樣做但是
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>
)
}
當我輸入警報工作時,但 onChangeText={(text) => setNumRounds(text)} 和其他人看不到我的輸入,為什么?
<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>
這是您可以使用的代碼:
onChanged
function 移動到另一個文件,並使用Regex
將非數字字符替換為空字符串。 除此之外,我將onChangeText
的輸入值從(text)=> onChanged(text)
更改為onChangeText
(它是道具),因為onChanged
不再存在。
export default function AppTextInput({
icon,
placeholder,
onChangeText,
...otherProps
}) {
return (
<View style={styles.container}>
{icon && (
<MaterialCommunityIcons
style={{ marginRight: 10 }}
name={icon}
color={colors.grayMedium}
size={20}
/>
)}
<TextInput
style={defaultStyles.text}
placeholder={placeholder}
onChangeText={onChangeText}
maxLength={3}
{...otherProps}
></TextInput>
</View>
);
}
這里我添加了名為replaceNonNumeric
的 function , function 用於將任何非數字數字替換為空字符串,因此其中只有數字。
在您更改 state 並將新值傳遞給setState
之前,我調用了replaceNonNumeric
。
...
const replaceNonNumeric = (text) => {
return text.replace(/[^0-9]/g, '');
};
return (
<View style={{ top: -80 }}>
<AppTextInput
icon="timer-sand"
placeholder={'Prep Time'}
keyboardType="numeric"
onChangeText={(text) => {
const newText = replaceNonNumeric(text);
setPrepTime(newText);
}}
/>
<AppTextInput
icon="timer"
placeholder={'Round Duration'}
keyboardType="number-pad"
onChangeText={(text) => {
const newText = replaceNonNumeric(text);
setRoundDuration(newText);
}}
/>
<AppTextInput
icon="timer"
placeholder={'Break Duration'}
keyboardType="number-pad"
onChangeText={(text) => {
const newText = replaceNonNumeric(text);
setBreakDuration(newText);
}}
/>
<AppTextInput
icon="repeat"
placeholder={'Number of Rounds'}
keyboardType="number-pad"
onChangeText={(text) => {
const newText = replaceNonNumeric(text);
setNumRounds(newText);
}}
/>
<AppTextInput
icon="format-list-numbered"
placeholder={'Number of Sets'}
keyboardType="number-pad"
onChangeText={(text) => {
const newText = replaceNonNumeric(text);
setNumSets(text);
}}
/>
{exerciseInputEles}
</View>
...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.