当前文本输入React Native

h4cxqtbf  于 2022-12-14  发布在  React
关注(0)|答案(3)|浏览(142)

我有一个组件,使用这个组件我无法写出正确的输入,所以只能输入数字,没有,.等等,请帮助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>

我尝试了这个解决方案,但它没有工作,我想我不明白在什么地方把和如何使用,它开始工作。

nmpmafwu

nmpmafwu1#

首先,onChange事件处理程序的参数不是输入的新值,而是一个事件对象。

onChange(event) {
    let text = event.target.value;
    ...
u91tlkcl

u91tlkcl2#

我试着那样做但是

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>
olhwl3o2

olhwl3o23#

下面是您可以使用的代码:
1.我将onChanged函数移到另一个文件中,并使用Regex将非数字字符替换为空字符串。
除此之外,我将onChangeText的输入值从(text)=> onChanged(text)更改为onChangeText(这是 prop ),因为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>
  );
}

1.这里我添加了一个名为replaceNonNumeric的函数,该函数用于将任何非数字的数字替换为空字符串,这样就只有数字在里面了。
1.我在您更改状态之前调用了replaceNonNumeric,并将新值传递给setState

...
 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>
...

相关问题