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

Question

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

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

Answer 1

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

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

Adding characters automatically in react-hooks textInput

textinput

reactjs

react-native

react-hooks