React Native中TextInput默认键盘类型下maxLength不生效问题求助

问题根源 #

GSTIN输入框处于非受控状态：你在onChangeText逻辑里仅当输入长度等于15时才更新gstin状态，同时通用组件使用defaultValue而非value绑定状态，导致输入过程中输入框的值不受state控制，maxLength约束失效。而Phone输入框正常是因为每次输入都实时更新了phone状态，间接实现了受控模式，maxLength能正常生效。

解决步骤 #

1. 将通用CustomTextInput改为受控组件

把组件内的defaultValue替换为value，确保输入框值由父组件传入的状态控制：

function CustomTextInput(props) {
  return (
    <TextInput
      ref={props?.autofocus}
      numberOfLines={1}
      editable={true}
      keyboardType={props?.keyboardType}
      style={[styles.editText,{paddingLeft:props?.adjustPadding == true ?'7%':'3%'}]}
      placeholder={props.placeholder}
      // 替换defaultValue为value，绑定父组件状态
      value={props.value}
      maxLength={props.maxLength}
      autoCapitalize={props?.autoCapitalize}
      onChangeText={text => props.onChangeText(props.placeholder, text)}
    />
  );
}

2. 调整EditContact的状态更新逻辑

移除GSTIN输入时的长度限制判断，每次输入都实时更新状态，保证输入框受控：

const onChangeText = (type, value) => {
  try {
    switch (type) {
      case 'Phone':
        setDetails({
          ...details,
          phone: value,
        });
        break;
      case 'GSTIN':
        // 移除长度判断，实时更新状态
        setDetails({
          ...details,
          gstin: value,
        });
        break;
    }
  } catch (error) {
    console.log('EditContactonChangeTextEroor', error);
  }
};

3. 给CustomTextInput绑定value属性

在使用组件时，将对应state绑定到value参数，让输入框完全受控：

<View style={{margin: '2%'}}>
  <CustomTextInput
    placeholder={'Phone'}
    onChangeText={onChangeText}
    keyboardType={'numeric'}
    maxLength={15}
    value={details.phone}
  />
  <View style={{marginTop: '4%'}} />
  <CustomTextInput
    placeholder={'GSTIN'}
    onChangeText={onChangeText}
    maxLength={15}
    autoCapitalize={'characters'}
    keyboardType={'default'}
    value={details.gstin}
  />
</View>

额外说明 #

如果需要校验GSTIN最终长度为15，建议在表单提交阶段做校验，而非输入过程中阻止状态更新，这样既保证maxLength生效，又能满足业务需求。

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