[英]Current Text Input React Native
I have a component and use of this component I can't write the correct input so that you can enter only numbers without, .我有一个组件并使用该组件我无法编写正确的输入,因此您只能输入没有 , 的数字。 and so on, please help component use of component
等等,请帮助组件使用组件
my 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>
)
}
use of component组件的使用
<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>
I try this solutions, but it didnt work, i think i don't understand in what place put and how to use, that it start works.我尝试了这个解决方案,但它没有用,我想我不明白放在什么地方以及如何使用它开始工作。
First of all, an argument for the onChange event handler is not a new value of the input but an event object. You can access the value by doing something like this:首先,onChange 事件处理程序的参数不是输入的新值,而是事件 object。您可以通过执行以下操作来访问该值:
onChange(event) {
let text = event.target.value;
...
i try do like that but我试着那样做但是
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>
)
}
when i input alert work, but onChangeText={(text) => setNumRounds(text)} and other don't see my input, why?当我输入警报工作时,但 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>
Here is the code you can use:这是您可以使用的代码:
onChanged
function you have to the other file and use Regex
to replace the non-digit character with empty string.onChanged
function 移动到另一个文件,并使用Regex
将非数字字符替换为空字符串。 Aside from that I changed the input value of your onChangeText
from (text)=> onChanged(text)
to onChangeText
(it's the props), because onChanged
is not there anymore.除此之外,我将
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>
);
}
Here I added the function called replaceNonNumeric
, the function is used to replace any non-numeric digit to an empty string, so there will be only digit in it.这里我添加了名为
replaceNonNumeric
的 function , function 用于将任何非数字数字替换为空字符串,因此其中只有数字。
I called replaceNonNumeric
right before you change the state and passed the new value to the setState
.在您更改 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.