如何仅设置值编号或文本输入必须在文本输入中具有@ React NATIVE

Posted 2023-04-18

【中文标题】如何仅设置值编号或文本输入必须在文本输入中具有@ React NATIVE

【英文标题】：How to set value number only or the text input must have @ in text input React NATIVE

【发布时间】：2020-06-15 09:55:48

【问题描述】：

我想为电话号码进行文本输入，该值必须仅为数字且最小长度为 7，另一个文本输入是用于电子邮件，该值必须具有“@”。如果电话和电子邮件文本输入值不适合该条件，我想给出一些警告。

<Text
  style=
    marginTop: 10,
    marginLeft: 0,
    textAlign: 'auto',
    fontWeight: 'bold',
  >
  Phone Number :
</Text>

<Item>
  <Input
    placeholder=""
    style= fontSize: 14, borderColor: '#00468c', borderWidth: 1, marginTop: 8 
    placeholderTextColor='#cfcfcf'
    onChangeText=valueNoHP => 
      this.setState( valueNoHP )
      console.log("Ini: " + valueNoHP)
    
    value=this.state.valueNoHP
    keyboardType='number-pad'
    minLength=7
  />
</Item>

<Text
  style=
    marginTop: 10,
    marginLeft: 0,
    textAlign: 'auto',
    fontWeight: 'bold',
  >
  Email Address :
</Text>

<Item>
  <Input autoCapitalize='none' placeholder="" style= fontSize: 14, borderColor: '#00468c', borderWidth: 1, marginTop: 8  placeholderTextColor='#cfcfcf'
    onChangeText=valueEmail => this.setState( valueEmail )
    value=this.state.valueEmail
    keyboardType='email-address'
  />
</Item>

【参考方案1】：

在 onChangeText 中你可以放入任何函数。所以你可以用标准的javascript东西检查长度。从设计的角度来看，在设置状态后只调用一个同时调用 onChangeText 的函数可能更容易。

【参考方案2】：

我会建议 react-native TextInput 文档在这里是链接，你会发现很多属性和方法可能对未来有所帮助。

https://reactnative.dev/docs/textinput

这是实际需要的工作示例。链接是展示

https://snack.expo.io/@asad_4561/textinput?session_id=snack-session-7_eZSvZUo&preview=true&platform=web&iframeId=33hlricz7f&supportedPlatforms=ios,android,web&name=TextInput&description=Example%20usage&waitForData=true

代码在这里（您可以根据需要更改）

import React,  Component  from 'react';
import  View, Text,TextInput,Alert  from 'react-native';

export default class  App extends Component 
  constructor(props) 
  
      super(props);
      this.FocusToPhone = null;
      this.FocusToEmail = null; 
      this.state=
        phone:0,
        email:"",
      ;
  
  onChangeEmail(text)
    this.setstate(email:text);
  
  onChangephone(text)
    if(text.length < 7)
    
      Alert.alert ('Alert', 'Phone number length is too small! please re-enter phone number');
      this.FocusToPhone.focus();
    
    else
    
      this.setstate(phone:text );
      this.FocusToEmail.focus();
      
  
render()
    
return (
    <View>
        <Text
      style=
        marginTop: 10,
        marginLeft: 0,
        textAlign: 'auto',
        fontWeight: 'bold',
      >
      Phone Number :
    </Text>
        <TextInput
          ref=(input) =>  this.FocusToPhone = input; 
          style= height: 40, borderColor: 'gray',borderWidth: 1 
          onSubmitEditing=e => this.onChangephone(e.nativeEvent.text)
          autoCapitalize='none'
          autoCorrect=false
          enablesReturnKeyAutomatically=true
          keyboardType="phone-pad"
          placeholder="Phone #"
        />

    <Text
    style=
      marginTop: 10,
      marginLeft: 0,
      textAlign: 'auto',
      fontWeight: 'bold',
    >
    Email Address :
  </Text>
        <TextInput
         ref=(input) =>  this.FocusToEmail = input; 
          placeholder="Email"
          style= height: 40, borderColor: 'gray',borderWidth: 1 
          autoCapitalize='none'
          autoCorrect=false
          enablesReturnKeyAutomatically=true
          onChangeText=text => this.onChangeEmail(text)
          //value=value
          keyboardType="email-address"
        />

    </View>

  );