this.props.onPress不是函数错误Nativebase复选框

Question

我是新手，正在Vue Native上浏览Navivebase组件，我试图使用一个复选框，其中将Nativebase组件与Vue Native组件混合在一起。直到我喜欢代码中的事件处理函数，它才能正常工作，我无法弄清楚该怎么做，我在下面附加了代码

<template>
  <view class="container">
    <view>
    
    <text class="text-header">Register</text>

	    <text-input
	        class="text-input-login"
	        v-model="firstname" placeholder="email"
	      />

	    <text-input
	        class="text-input-login"
	        v-model = "lastname" placeholder="password"
	      />
      <text-input
        class="text-input-login"
        v-model = "email" placeholder="password"
      />

      <text-input
          class="text-input-login"
          v-model = "pwd" placeholder="password"
      />

      

       <touchable-opacity class = "button-container" v-bind:on-press="handleBtnPress">
          <text class="button-login">Register</text>
      </touchable-opacity>

      <nb-container class="check-box">
        <nb-checkbox :checked="agreeTnC" onPress= {this.handleCheckBox()} />
      </nb-container>

  	</view>
  </view>
</template>

<script type="text/javascript">
 
import {APIService} from './APIService';

const apiService = new APIService();

export default {
  data: function() {
    return {
      firstname:'',
      lastname:'',
      email:'',
      pwd:'',
      agreeTnC:false,
    };
  },
  methods: {
    handleBtnPress: function() {
   
      apiService.authenticate(this.email,this.pwd).then((data) => {

        console.log(data);

        result = data['result'];

        if(result == 'failed') {
          alert('Login failed, please retry with correct username and password');
        }
        
      });

    },
    handleCheckBox: function() {
        this.agreeTnC = !this.agreeTnC
    }
  }
};
</script>



<style>
.container {
  flex: 1;
  background-color: #4b4463;
  align-items: center;
  justify-content: center;
}
.button-container {
  
  align-items: center;
  justify-content: center;
  width:300;
  height: 40;

  background-color: #4b4463;
  border-color: white;
  border-width: 2;

  margin-top: 30;

  margin-bottom: 100;
}
.text-color-primary {
  color: white;
  font-size: 20;
  margin-bottom: 10;

}

.text-header {

  color: white;
  font-size: 40;
  justify-content: center;
  text-align: center;
  margin-bottom: 50;

}
.text-input-login {

	background-color: white;
	height: 40;
	width: 300; 

	font-size: 20;
	margin-bottom: 20;

}
.button-login {
    
    color: white;
    background-color: #4b4463;
}

.check-box {
    
    width: 200;
    height: auto;
    background-color: #4b4463;

}
</style>

点击复选框时出现以下错误

Answer 1

onPress= {this.handleCheckBox()}中有错误 onPress接受函数值，但是您正在调用函数并提供值。因此它变成onPress= {undefined}，而不是一个函数。

将onPress= {this.handleCheckBox()}更改为onPress= {this.handleCheckBox}（不带括号），应该将其固定。

Answer 2

以下事情对我有用

handleChange() {
    this.agreeTnC = !this.agreeTnC;

}

以及组件声明也以这种方式更改

 <nb-checkbox :checked="agreeTnC" :onPress="handleChange">
  </nb-checkbox>