Question

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

Obs：模态组件使用来自'react-native-modal'的模态

组件模式：

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评论作为这个问题的答案。

亚历山大·波波维奇：

在使用模态的组件中，您需要绑定'_saveCard'函数。通过'_saveCard =（）=＆gt;来做{...'或通过'.bind（）'在构造函数中绑定它。在渲染中使用它是必须的。

React native无法创建引用组件

1 个答案: