reactjs - 在 TextInput React Native 中输入文本时不应删除占位符文本

Question

我需要一些帮助来使用 TextInput react native。

我想要实现的是，当用户开始在表单字段中输入时，我需要在 TextInput 中附加“月份”文本。如果您查看以下 Tenure 和 Paid EMI 的屏幕截图，则值为 123 和 12。我需要在用户输入值时动态添加“123 个月”和“12 个月”月份。

例如，如果用户输入 2，则应显示为“2 个月”，如果用户删除 2，则默认占位符文本应显示为“36 个月”。

更重要的是“月份”应该是不可编辑的，用户应该只能输入或更新数值。例如：如果 TextInput 中的值为“12 个月”，并且用户希望将其更新为“32 个月”。然后他/她单击 TextInput 字段并单击退格键 2 次，然后输入新值“32”。在用户界面中，它将显示为“32 个月”。

[注意：- 只有我需要捕获数值，我不希望捕获月份值。它只需要在 TextInput 中为最终用户显示。“32 个月”将显示在表单字段中，但状态值应仅为“32”。

[EDITED-1 添加代码] 渲染功能：-

            <View style={{marginTop:height(2),width:width(90)}}>
           <View style={{height:height(3),marginLeft:width(1)}}>
                <Text style={{fontSize:16,fontFamily:"Ubuntu-Bold"}}>Tenure</Text>
                </View> 
              <View style={{marginTop: height(1),width:width(90),alignItems:"center"}}>
            <TouchableOpacity  style={{width:width(90),flexDirection:"row",backgroundColor:"#F6F6F6",alignItems:"center",justifyContent:"center",height:height(6),borderRadius:12}}>
           
           <TextInput placeholder="36 months"  
                      textAlign={"center"} 
                      value={this.state.tenure}
                      maxLength={3}
                      onChangeText={this.onTenureChanged.bind(this)}
                      keyboardType="number-pad"/>
       </TouchableOpacity>
           </View>
            </View>

            <View style={{marginTop:height(4.5),width:width(90),bottom: height(3)}}>
           <View style={{height:height(3),marginLeft:width(1)}}>
                <Text style={{fontSize:16,fontFamily:"Ubuntu-Bold"}}>Paid EMI</Text>
                </View> 
              <View style={{marginTop: height(1),width:width(90),alignItems:"center"}}>
            <TouchableOpacity  style={{width:width(90),flexDirection:"row",backgroundColor:"#F6F6F6",alignItems:"center",justifyContent:"center",height:height(6),borderRadius:12}}>
           
           <TextInput placeholder="15 months"  
                      textAlign={"center"} 
                      maxLength={3}
                      value={this.state.paidemi}
                      onChangeText={this.onPaidEMIChanged.bind(this)}
                      keyboardType="number-pad"/>
       </TouchableOpacity>
           </View>
            </View>

Javascript函数：-

onTenureChanged(itemValue){
  this.setState({tenure: itemValue})
}

onPaidEMIChanged(itemValue){
  this.setState({paidemi: itemValue})
}

标签： reactjsreact-nativereact-native-androidtextinput