TouchableHighlight 按下错误 [英] TouchableHighlight press error

问题描述

我是 react-native 的新手，我只是想尝试处理动作和状态.我不明白这个组件的问题在哪里.

I'm new to react-native, I'm just trying to play around with actions and states. I don't get where's the problem in this component.

我收到错误 undefined is not an object (evaluating 'this.wrappedInstance.setNativeProps')

import React, { Component } from 'react';
import { Container, Text } from 'native-base';
import {
    AppRegistry,
    View,
    TouchableHighlight
} from 'react-native';

export default class Page2 extends Component {
    constructor(){
        super();
        this.state  = {
            mess: "Page 2 message"
        }
    }
    onPress(){
        this.state.mess = this.state.mess+" wow a click!"
    }
    render() {
        return (
            <View>
                <TouchableHighlight
                    onPress={this.onPress}
                    underlayColor="blue"
                >
                <Text> {this.state.mess}</Text>
                </TouchableHighlight>
            </View>
        );
    }
}
AppRegistry.registerComponent('Page2', () => Page2);

推荐答案

你永远不想改变状态，而是想使用 setState.

You never ever want to mutate state, instead you're going to want to use setState.

 onPress(){
    this.state.mess = this.state.mess+" wow a click!" //mutating state
}

改为:

onPress = () => { //arrow syntax will change the scope of `this` to your component
    this.setState(prevState => ({ mess: prevState.mess + " wow a click!" });
} // anytime you want to alter state based on previous state you should use this syntax

这篇关于TouchableHighlight 按下错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！