在 React 函数式组件中访问 Refs

Posted 2023-02-22

【中文标题】在 React 函数式组件中访问 Refs

【英文标题】：Accessing Refs in React Functional Component

【发布时间】：2020-03-11 08:01:24

【问题描述】：

我正在使用this 包将信用卡添加到我的应用程序中，当在功能组件中使用它时，您将如何访问示例中的引用？

这是它们显示更新值的方式：

this.refs.CCInput.setValues( number: "4242" );

我不知道如何在功能组件中访问它？

这是我编辑卡片的组件，我想将当前值添加到输入中。

import React, useContext, useState, useRef from 'react';
import Text, View, StyleSheet, TouchableOpacity from 'react-native';
import CreditCardInput from 'react-native-input-credit-card';

import Store from '../../store/context';

const styles = StyleSheet.create(

);

export default function EditCard(props) 
  const navigate = props.navigation;
  const cardNumber = props.navigation.state.params;
  const state, dispatch = useContext(Store);
  const [card, setCard] = useState(
    state.cards.find(card => 
      return card.values.number === cardNumber;
    ),
  );
  const _onChange = form => 
    if (form.valid) 
      setCard(form);
    
  ;
  const updateCard = () => 
    dispatch(
      type: 'ADD_CARD',
      payload: card,
    );
    navigate.goBack();
  ;
  return (
    <View style=styles.container>
      <CreditCardInput
        validColor='#47B278'
        invalidColor='#E23C3C'
        placeholderColor='#efefef'
        onChange=_onChange
        requiresName
      />
      <TouchableOpacity
        style=
          card
            ? card.valid
              ? styles.button
              : styles.buttonDisabled
            : styles.buttonDisabled
        
        disabled=card ? (card.valid ? false : true) : true
        onPress=updateCard>
        <Text style=styles.buttonText>Update Credit Card</Text>
      </TouchableOpacity>
    </View>
  );

【参考方案1】：

你需要使用useRef钩子：

const cciRef = useRef();

<CreditCardInput ref=cciRef/>;
// cciRef.current holds the reference

export default function EditCard(props) 
  const cciRef = useRef();

  useEffect(() => 
    console.log(cciRef.current);
    cciRef.current.setValues( number: "4242" );
  , []);

  return (
    <View style=styles.container>
      <CreditCardInput ref=cciRef />
    </View>
  );

【讨论】：

请更新您对此的回答，然后我可以将其标记为正确：这有效：CCInput.current.setValues(...)

感谢您的回答，没想到 useRefs 这么简单！