Автоматическое добавление символов в ответные зацепки textInput - PullRequest
Новая
       10

Автоматическое добавление символов в ответные зацепки textInput

0 голосов
/ 03 октября 2019

Я использую реагирующий натив с реактивными крючками. Я хочу автоматически добавить некоторые символы, такие как «-» или «(пробел)» в номер карты и «/» в установленный срок. Это должно работать, как показано ниже.

Если пользователь вводит числа в поле ввода номера карты, то '-' должно добавляться автоматически. 1234 -> 1234- -> 1234-5678 -> 1234-5678-. Также в установленный срок я хочу добавить '/'. 02 -> 02/ -> 02/23

const CardAdd = () => {
  const [cardNumber, setCardNumber] = useState("");
  const [dueDate, setDueDate] = useState("");

  onInputChange = (setState, value) => {
    setState(value);
  };

  if (dueDate.length === 2) {
    setDueDate(dueDate + "/");
  }

  return (
    <View style={styles.container}>
      <Input
        name="Card Number"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="1234 5678 1234 5678"
        value={cardNumber}
        onChangeText={value => onInputChange(setCardNumber, value)}
      />
      <Input
        name="Due Date"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="MM/YY"
        value={dueDate}
        onChangeText={value => onInputChange(setDueDate, value)}
      />
    </View>
  );
};

Если я так делаю, это работает. Он добавляет '/' автоматически, когда я набираю 2 цифры в установленный срок. Но я не могу удалить после, чем. Как я могу решить эту проблему?

1 Ответ

1 голос
/ 03 октября 2019

Вы должны использовать useEffect , чтобы отслеживать изменения состояния и соответственно обновлять ваше состояние. Я сделал некоторую логику в отношении кредитной карты, но она может не работать, но вы можете улучшить логику 

import React, { useEffect, useState } from 'react'

const CardAdd = () => {
  const [cardNumber, setCardNumber] = useState("");
  const [dueDate, setDueDate] = useState("");

  onInputChange = (setState, value) => {
     if(!isNaN(value)) {
       setState(value);
     }
  };

  useEffect(() => {
    if (dueDate.length === 2) {
      setDueDate(dueDate + "/");
    }
    if(cardNumber.length === 4) {
      setCardNumber(cardNumber+'-')
    }
    if(cardNumber.contains('-') 
   && (cardNumber.length - cardNumber.split("-").length - 1) % 2 === 0 
   && (cardNumber.length - cardNumber.split("-").length - 1) !== 16
) {
       setCardNumber(cardNumber+'-')
    }

  }, [cardNumber, dueDate]) 



  return (
    <View style={styles.container}>
      <Input
        name="Card Number"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="1234 5678 1234 5678"
        value={cardNumber}
        onChangeText={value => onInputChange(setCardNumber, value)}
      />
      <Input
        name="Due Date"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="MM/YY"
        value={dueDate}
        onChangeText={value => onInputChange(setDueDate, value)}
      />
    </View>
  );
};
...