Как создать управляемый пользовательский ввод в React Native? - PullRequest
Новая
       16

Как создать управляемый пользовательский ввод в React Native?

0 голосов
/ 28 мая 2020

Я хотел бы создать пользовательский интерфейс с управляемым вводом, используя React Native. Под этим я имею в виду следующее:

  1. Пользователь нажимает компонент TextInput для поиска чего-либо. value И placeholder автоматически заполняется префиксом «ABCDE-»
  2. . Пользователю отображается «numeri c» keyboardType. После ввода четырех чисел к поисковому значению автоматически добавляется еще один знак «-»: «ABCDE-1234 -»
  3. Пользователь вводит еще четыре числа, и окончательное значение поиска выглядит так: «ABCDE- 1234-5678 "

Мне интересно два аспекта этого опыта: заполнение префикса" ABCDE- "при onPress и добавление второго da sh после n вводятся числа.

Переключение между алфавитом, альтернативными символами и числами в рамках одного поиска довольно неудобно и громоздко, и таким образом его можно упростить.

Ответы [ 2 ]

1 голос
/ 28 мая 2020

Я сделал такой простой пример кода, вы можете попробовать и изменить то, что хотите: 

import React, { Component } from "react";
import {TextInput } from "react-native";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
  }

  onChangeTextHandler(text){
    var len = text.length;
    if ((len===5 || len===10)&& len>=this.state.text.length){
      text = text +"-"
    }
    if(text.length!==16){
      this.setState({text:text})
    }    
  }
  render() {
    return (
      <TextInput
      style={{height: 40, borderColor: 'gray', borderWidth: 1,marginTop:20}}
      onChangeText={(text) => this.onChangeTextHandler(text)}
      value={this.state.text}
      placeholder="ABCDE-1234-5678"
    />
    );
  }
}

export default App;

Test Link

0 голосов
/ 28 мая 2020

для точки 1 вы можете использовать onFocus prop TextInput следующим образом 

<TextInput
   value={this.state.searchTerm}
   style={/* your style*/}
   onFocus={()=>{
    if(this.state.searchTerm==""){
     this.setState({searchTerm:"ABCDE-"})
    }
  }}
/>

для Point 2 используйте keyboardType и onChangeText prop TextInput следующим образом 

<TextInput
   value={this.state.searchTerm}
   style={/* your style*/}
   keyboardType={"numeric"}
   onChangeText={(text)=>{
     /*since there 6 characters placed on focus so n character login will be*/

    if(this.state.searchTerm.length>6){         
        if(value.length%5==0){
          let temp = this.state.searchTerm+"-"+text[text.length-1]
          onChangeText(temp)
        } else {
          onChangeText(text)
        }
     }else{
      onChangeText(text)
     }
   }}
   onFocus={()=> {
    if(this.state.searchTerm==""){
      this.setState({searchTerm:"ABCDE-"})
    }
  }}
/>

Надеюсь, из этого кода вы получите представление о том, как реализовать управляемый ввод пользователем

...