反应本机无法创建对组件的引用

Question

我制作了一个自定义模态组件，创建了两种方法来更改组件的状态，以确定模态是否应该出现。但是当我尝试为此组件创建ref并使用它时，它会冻结应用程序并没有给我任何错误。我无法调用调用模态组件的方法。

obs：模态组件正在使用"反应 - 新模式"

的模态

组件模式：

export class ModalCard extends React.Component{

static propTypes = {
    textModal: PropTypes.string,
    onPressCancel: PropTypes.func,
    onPressOk: PropTypes.func,
    cardDetails:PropTypes.string,
    okText:PropTypes.string,
    cancelText:PropTypes.string
};
constructor(props) {
    super(props);
    this.state = {
        showModal:false
    }
}

_hideModal = () =>{this.setState({...this.state,showModal:false})}
_showModal = () =>{this.setState({...this.state,showModal:true})}
render() {
    return (
        <Modal isVisible = {this.state.showModal}>
        <View style={styles.modalContent}>
            <View style={styles.modalSave}>
                <Icon backgroundColor='#43114200' size={30} name='highlight-off' color={'#431142'} onPress={()=>this._hideModal}/>
            </View>
            <View style={styles.modalSaveTextView}>
                <Text style={styles.modalSaveText}>
                    {this.props.textModal}
                </Text>
            </View>
            <View style={styles.cardDetails}>
                <Text>
                    {this.props.cardDetails}
                    </Text>
            </View>
            <View style={{flexDirection: 'row', justifyContent: 'center'}}>
                <CustomButton primary={false}   onPress={this.props.onPressCancel}  title = {this.props.cancelText}/>
                <CustomButton primary={true} onPress={this.props.onPressOk}  title = {this.props.okText}/>
            </View>
        </View>
        </Modal>
    )
}

}

使用模态

的组件

class CadastrarCartaoContainer extends React.Component {
state = {
    cartao: {
        numeroCartao: '',
        tipoDePagamento: '',
        dataDeValidade: '',
        nomeDoPropietario: '',
        cvv: ''
    },
    showButtons:true,
    modalOpen:false
}
componentWillMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
}
componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
}
_keyboardDidShow  = () => {
    this.setState({
        ...this.state,
        showButtons:false
    })
}
_keyboardDidHide  = () => {
    this.setState({
        ...this.state,
        showButtons:true
    })
}
_hideModal= () =>this.modal._hideModal()


handleInputChange = (e,name) => {
    const cartao = { ...this.state.cartao };
    cartao[name] = e;
    this.setState({
        ...this.state,
        cartao:cartao
    })
};
_saveCard () {
    console.log(this.modal)
    this.modal._showModal()
}
render() {
    return (
       <View style = {styles.textViewBackground}>
           <ModalCard ref={node => {this.modal = node}}
                      cancelText={'Cancelar'} cardDetails={this.state.cartao.numeroCartao}
            okText={'Confirmar'}  onPressCancel={this._hideModal}
                       textModal={'Deseja cadastrar este cartão de numero :'} onPressOk={this._hideModal} />

           <InputCreditCard  placeholder = {' Número do Cartão'} textStyle={styles.textInput}
              backgroundStyle={styles.textInputBackground}
                            onChangeText={(text) => this.handleInputChange(text,'numeroCartao')}
                             underlineColorAndroid = {'#00000000'} selectionColor = {'#431142'} />
           <InputCreditCard  placeholder = {' Tipo de Pagamento'} textStyle={styles.textInput}
                             backgroundStyle={styles.textInputBackground}
                             onChangeText={(text) => this.handleInputChange(text,'tipoPagamento')}
                             underlineColorAndroid = {'#00000000'} selectionColor = {'#431142'} />
           <InputCreditCard  placeholder = {' Data de Validade'} textStyle={styles.textInput}
                             backgroundStyle={styles.textInputBackground}
                             onChangeText={(text) => this.handleInputChange(text,'dataDeValidade')}
                             underlineColorAndroid = {'#00000000'} selectionColor = {'#431142'} />
           <InputCreditCard  placeholder = {' Nome do Propietário'} textStyle={styles.textInput}
                             backgroundStyle={styles.textInputBackground}
                             onChangeText={(text) => this.handleInputChange(text,'nomeDoPropietario')}
                             underlineColorAndroid = {'#00000000'} selectionColor = {'#431142'} />
           <InputCreditCard  placeholder = {' CVV'} textStyle={styles.textInput}
                             backgroundStyle={styles.textInputBackground}
                             onChangeText={(text) => this.handleInputChange(text,'cvv')}
                             underlineColorAndroid = {'#00000000'} selectionColor = {'#431142'} />
           <RenderIf condition = {this.state.showButtons}>
           <View style = {styles.buttonView}>
               <CustomButton  onPress={()=>this._saveCard()} primary={true} title={'CADASTRAR'} />
               <CustomButton   primary={false} title={'CANCELAR'} />
           </View>
           </RenderIf>

       </View>
    )
}

}

我应该可以访问模态方法或至少有错误，但是它没有错误并冻结应用程序

Answer 1

只是想将Aleksandar评论作为答案。

Aleksandar Popovic：

在使用模式的组件中，您需要绑定'_savecard'函数。通过'_savecard =（）=> {...'或通过'.bind（）'将其绑定。是您在渲染中使用它的必需品。