时间戳

首页 > 解决方案 > 在 react-hooks textInput 中自动添加字符

reactjs - 在 react-hooks textInput 中自动添加字符

问题描述

我正在使用带有 react-hooks 的 react-native。我想在卡号中自动添加一些字符，例如“-”或“（空格）”，在到期日中添加“/”。它应该像下面这样工作。

如果用户在卡号输入中输入数字，则“-”应自动添加。
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 位数字时，它会自动添加“/”。但我不能删除之后的比。我怎么解决这个问题？

标签： reactjsreact-nativereact-hookstextinput

解决方案

你应该使用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>
  );
};

推荐阅读