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

【问题标题】：Adding characters automatically in react-hooks textInput在 react-hooks textInput 中自动添加字符
【发布时间】：2019-10-03 13:40:06
【问题描述】：

我正在使用带有 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 位数字时，它会自动添加“/”。但我不能删除之后的比。我该如何解决这个问题？

【问题讨论】：

格式化输入模块是here。你可以用它来实现cardNumber输入和dueDate输入

标签： reactjs react-native react-hooks textinput

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

【讨论】：