React Native自定义TextInput组件：父组件onChangeText无法获取输入值

我实现了一个自定义AppTextInput组件，用于限制仅输入整数，输入非数字时弹出提示。但使用时发现：输入非数字时alert提示正常触发，但父组件传入的onChangeText回调（如setNumSets等状态更新函数）完全获取不到输入值。

自定义组件代码 #

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>

原因分析 #

1. 核心问题：自定义组件的onChanged函数只做了输入过滤，但从未调用父组件传入的onChangeText回调，导致父组件完全接收不到处理后的输入值。
2. 体验问题：当前遍历每个字符的逻辑会导致输入多个非数字时，连续弹出多次alert，用户体验极差。

修复方案 #

修改后的自定义组件代码 #

import { useState } from 'react';

export default function AppTextInput({icon, placeholder, onChangeText, ...otherProps}) {
  // 用内部状态维护输入框的值，避免显示和实际值不一致
  const [inputValue, setInputValue] = useState('');

  const onChanged =(text) =>{
      const numbers = '0123456789';
      // 过滤出所有数字字符
      const newText = text.split('').filter(char => numbers.includes(char)).join('');
      
      // 仅当原输入包含非数字时，弹出一次提示
      if (text.length !== newText.length) {
          alert("please enter integer numbers only");
      }

      // 更新内部输入值
      setInputValue(newText);
      // 调用父组件的onChangeText，传递处理后的数字值
      if (onChangeText) {
          onChangeText(newText);
      }
    }

    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}
                value={inputValue} // 绑定内部状态，确保输入框显示正确的值
                {...otherProps}
            />
        </View>
    )
}

关键改动说明 #

1. 添加内部状态：用useState维护输入框的实际值，避免输入框显示的内容和处理后的值不一致。
2. 优化过滤逻辑：通过filter一次性过滤出所有数字，同时对比原输入和过滤后的值长度，只在有非数字输入时弹一次alert。
3. 调用父组件回调：处理完输入值后，主动调用onChangeText传递过滤后的数字值，让父组件能获取到正确的输入。
4. 绑定value属性：把内部状态inputValue绑定到TextInput的value上，确保输入框始终显示处理后的合法值。

内容的提问来源于stack exchange，提问作者akame