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

【问题标题】：How to set value number only or the text input must have @ in text input React NATIVE如何仅设置值编号或文本输入必须在文本输入中具有@ 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>

【问题讨论】：

标签： react-native textinput

【解决方案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>

  );
}

}

【讨论】：