this.state là undefined trong sự kiện onPress trong phản ứng tự nhiên

Question

Xin chào tôi mới trong phản ứng tự nhiên, mã của tôi là:

import React, { 
 
    View, 
 
    Text, 
 
    TextInput, 
 
    Component 
 
} from 'react-native'; 
 

 
import Style from './styles/signin'; 
 
import Button from '../common/button'; 
 

 
export default class SignIn extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     email: '', 
 
     password: '' 
 
    }; 
 
    } 
 

 
    render(){ 
 
    return(
 
     <View style={Style.container}> 
 
     <Text style={Style.label}>Email</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({email: text})} 
 
      value={this.state.email} 
 
     /> 
 
     <Text style={Style.label}>Password</Text> 
 
     <TextInput 
 
      style={Style.input} 
 
      onChangeText={(text) => this.setState({password: text})} 
 
      value={this.state.password} 
 
      secureTextEntry={true} 
 
     /> 
 
     <Button text={'Sign in'} onPress={this.onPress}/> 
 
     </View> 
 
    ); 
 
    } 
 
    onPress(){ 
 
    console.log(this.state.email); 
 
    } 
 
}

Khi tôi điền vào mẫu dưới và nhấn dấu này trong, tôi có thông báo lỗi này: "Không thể đọc email thuộc tính 'của không xác định". Cảm ơn sự giúp đỡ của bạn!

Answer 1

Đây là vấn đề ràng buộc. Giải pháp đơn giản nhất sẽ thay đổi JSX của bạn cho thẻ nút như vậy:

<Button text={'Sign in'} onPress={this.onPress.bind(this)} /> 

ES6 lớp mất autobinding bạn có thể đã được sử dụng để với react.createClass ES5. Bạn phải có ý thức hơn về ràng buộc của bạn khi sử dụng ES6 cho các thành phần phản ứng.

lựa chọn khác là để ràng buộc phương pháp này trong constructor của bạn như vậy:

constructor(props) { 
    super(props); 
    this.state = { 
     email: '', 
     password: '' 
    }; 

    this.onPress = this.onPress.bind(this) 
    } 

Hoặc thậm chí bạn có thể sử dụng một hàm lượng chất béo mũi tên cú pháp es6 để duy trì 'này' liên kết với các thành phần bạn đang tạo:

<Button text={'Sign in'} onPress={() => this.onPress()} /> 

uPDATE:

Để cập nhật này một lần nữa, nếu môi trường của bạn hỗ trợ một số tính năng ES7 (mà tôi tin rằng phản ứng bản địa xây dựng từ react-native init hoặc create-react-native-app shoudl do) bạn có thể sử dụng ký pháp này để tự động ràng buộc các phương thức lớp học của mình sử dụng từ khóa this.

// This is auto-bound so `this` is what you'd expect 
onPress =() => { 
    console.log(this.state.email); 
}; 

thay vì

// This is not auto-bound so `this.state` will be `undefined` 
onPress(){ 
    console.log(this.state.email); 
} 

Các tùy chọn tốt nhất là sử dụng tính năng ES7 nếu có hoặc để ràng buộc trong constructor của bạn. Sử dụng chức năng ẩn danh onPress={() => this.onPress()} hoặc onPress={this.onPress.bind(this)} trực tiếp trên số Button của bạn ít thuận lợi hơn vì lý do hiệu suất.