Làm cách nào để tái cấu trúc các thành phần phản ứng với biến thành viên thành các lớp học es6

Question

Làm cách nào tôi có thể cấu trúc lại các thành phần React bằng biến thành viên thành các lớp es6 Nó hoạt động mà không có biến trạng thái. Tại sao, khi chạy mã bên dưới, tôi có nhận được màn hình màu đỏ lớn với "Không thể thêm bộ đếm thuộc tính, đối tượng không thể mở rộng" được không?

'use strict'; 
let Dimensions = require('Dimensions'); 
let totalWidth = Dimensions.get('window').width; 
let leftStartPoint = totalWidth * 0.1; 
let componentWidth = totalWidth * 0.8; 
import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 


class Login extends Component { 
    constructor(props) { 
     super(props);   
     this.counter =23; 
     this.state = { 
      inputedNum: '' 
     };   
    }  
    updateNum(aEvent) { 
    this.setState((state) => { 
     return { 
     inputedNum: aEvent.nativeEvent.text, 
     }; 
    }); 
    } 
    buttonPressed() { 
    this.counter++; 
    console.log(':::'+this.counter);  
    } 
    render() { 
    return (
     <View style={styles.container}>    
       <TextInput style={styles.numberInputStyle} 
        placeholder={'input phone number'} 
        onChange={(event) => this.updateNum(event)}/>        
       <Text style={styles.bigTextPrompt} 
        onPress={this.buttonPressed}> 
        Press me... 
       </Text> 
      </View> 
    ); 
    } 
} 

let styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     backgroundColor: 'white', 
     }, 
     numberInputStyle: { 
     top: 20, 
     left: leftStartPoint, 
     width: componentWidth, 
     backgroundColor: 'gray', 
     fontSize: 20 
     },  
     bigTextPrompt: { 
     top: 70, 
     left: leftStartPoint, 
     width: componentWidth, 
     backgroundColor: 'gray', 
     color: 'white', 
     textAlign: 'center', 
     fontSize: 60 
     } 
    }); 
AppRegistry.registerComponent('Project18',() => Login); 

Answer 1

Bạn cần phải thiết lập các giá trị trong các nhà xây dựng:

constructor(props) { 
    super(props) 
    this.counter = 23 
} 

Bạn có thể nhận các lỗi vì cách nhà nước đang được thiết lập. Hãy thử thiết lập nhà nước như thế này:

updateNum(aEvent) { 
    this.setState({ 
    inputedNum: aEvent.nativeEvent.text, 
    }) 
} 

Và chức năng onPress nên được gọi là như thế này:

<Text style={styles.bigTextPrompt} onPress={() => this.buttonPressed()}> 

tôi đã thiết lập một dự án làm việc đầy đủ here cũng dán đoạn code dưới đây.

https://rnplay.org/apps/Se8X5A

'use strict'; 

import React, { 
    AppRegistry, 
    Component, 
    StyleSheet, 
    Text, 
    TextInput, 
    View, 
     Dimensions 
} from 'react-native'; 
let totalWidth = Dimensions.get('window').width; 
let leftStartPoint = totalWidth * 0.1; 
let componentWidth = totalWidth * 0.8; 

class SampleApp extends Component { 
    constructor(props) { 
    super(props);   
    this.counter =23; 
    this.state = { 
     inputedNum: '' 
    };   
    }  
    updateNum(aEvent) { 
    this.setState({ 
     inputedNum: aEvent.nativeEvent.text, 
     }) 
    } 
    buttonPressed() { 
    this.counter++; 
    console.log(':::'+this.counter);  
    } 
    render() { 
    return (
     <View style={styles.container}>    
      <TextInput style={styles.numberInputStyle} 
      placeholder={'input phone number'} 
      onChange={(event) => this.updateNum(event)}/> 
      <Text style={styles.bigTextPrompt} 
       onPress={() => this.buttonPressed()}> 
       Press me... 
      </Text> 
     </View> 
    ); 
    } 
} 

let styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    backgroundColor: 'white', 
    }, 
    numberInputStyle: { 
    top: 20, 
    left: leftStartPoint, 
    width: componentWidth, 
    backgroundColor: 'gray', 
    fontSize: 20, 
    width:200, 
    height:50 
    },  
    bigTextPrompt: { 
    top: 70, 
    left: leftStartPoint, 
    width: componentWidth, 
    backgroundColor: 'gray', 
    color: 'white', 
    textAlign: 'center', 
    fontSize: 60 
    } 
}); 

AppRegistry.registerComponent('SampleApp',() => SampleApp);