当条目值更改时更新UI

Question

我有一个关于实时更新UI的问题(输入时)。这样做对吗？

我有这样的代码：

Regex方法：

determineCardBrand(number) {
    var re = new RegExp("^4");
    var reMC = new RegExp(
      "/^(5[1-5][0-9]{14}|2(22[1-9][0-9]{12}|2[3-9][0-9]{13}|[3-6][0-9]{14}|7[0-1][0-9]{13}|720[0-9]{12}))$/",
    );

    if (number.match(re) != null) {
      return "Visa";
    } else if (number.match(reMC) != null) {
      return "MasterCard";
    } else {
      return "";
    }
  }

查看代码段：

 <View style={{ flexDirection: "row" }}>
                <CardLogo
                  style={styles.cardLogo}
                  cardType={
                    cardNumber === ""
                      ? "Inactive"
                      : this.determineCardBrand(cardNumber)
                  }
                />
                <TextInputMask
                  underlineColorAndroid={"transparent"}
                  type={"credit-card"}
                  maxLength={19}
                  style={[Styles.paymentCardInput, { flexGrow: 1 }]}
                  onChangeText={cardNumber => {
                    this.setState({ cardNumber });
                    this.determineCardBrand(cardNumber);
                  }}
                  value={cardNumber}
                  returnKeyType="done"
                />
              </View>

如果我想确定我输入的卡号是否与CC品牌相关联(例如签证、万事达卡等)。因此，当我键入一个卡号，我希望卡标志改变，根据我键入的数字。CardLogo组件有一个开关语句，该语句确定类型名称是否被传递为例如Visa，然后显示Visa徽标。

这样做对吗？

通常情况下，你可以从前四位数中找到答案(我认为)，但有时只是第一位数字，比如签证卡。总是从四个开始。我测试了上面的，但出于某种原因，它只适用于Visa或未知CC，而不是万事达。我不确定这是因为Regex还是上面代码设置的方式。

Answer 1

您可以通过将cardType属性添加到状态来进行一次改进，这样您只需要确定一次卡片类型，它的可读性就很小，如下所示。

<View style={{ flexDirection: "row" }}>
const { cardType, cardNumber } = this.state;
<CardLogo
    style={styles.cardLogo}
    cardType={cardType}
/>
<TextInputMask
    underlineColorAndroid={"transparent"}
    type={"credit-card"}
    maxLength={19}
    style={[Styles.paymentCardInput, { flexGrow: 1 }]}
    onChangeText={cardNumber => {
        const cardType = this.determineCardBrand(cardNumber);
        this.setState({ cardNumber, cardType });
    }}
    value={cardNumber}
    returnKeyType="done"
/>

​

关于万事达卡的确定，显然您的母卡reg ex有问题，下面应该是工作的，从雷杰斯信息取来的正则表达式

determineCardBrand(number) {
const visa = /^4[0-9]{12}(?:[0-9]{3})?$/;
const master = /^(?:5[1-5][0-9]{2}|222[1-9]|22[3-9][0-9]|2[3-6][0-9]{2}|27[01][0-9]|2720)[0-9]{12}$/;

if (visa.test(number)) {
    return "Visa";
} else if (master.test(number)) {
    return "MasterCard";
} else {
    return "";
}}

Answer 2

在功能组件中，您可以使用钩子，在计算useEffect中的卡品牌时，触发每次卡号更改。我认为这将是更有效的，因为setState是异步的 (因此，您不应该假设您的状态是最新的，当调用determineCardBrand()在setState之后)。

[...]
const [cardNumber, setCardNumber] = useState('');
[...]
useEffect(() => {
  determineCardBrand();
}, [cardNumber]);
[...]
<TextInputMask
    underlineColorAndroid={"transparent"}
    type={"credit-card"}
    maxLength={19}
    style={[Styles.paymentCardInput, { flexGrow: 1 }]}
    onChangeText={cardNumber => {
        // const cardType = this.determineCardBrand(cardNumber); not needed anymore
        this.setCardNumber(cardNumber);
    }}
    value={cardNumber}
    returnKeyType="done"
/>

计算卡品牌通常是一个副作用(取决于状态值)，因此useEffect将是一个完美的工具(IMHO :)。但是你也可以在州中存储卡品牌，并安装const [cardBrand, setCardBrand] = useState('')。

请注意，这是函数方法，使用16.8中引入的钩子，因此对于您来说，这可能不是一个可行的解决方案。但在基于类的组件中，状态仍然是异步的。