Question

React Native 获取未定义不是对象错误

2018-08-10

345

react-native

我是 React Native 的新手。

当我在 Android 模拟器上运行我的代码时，我收到此错误：

undefined is not an object, evaluating ChangeTextHandler.bind(this).

请帮忙。谢谢。

这是我的代码。我遗漏了什么吗？

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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

// type Props = {};
export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    }
    this.onChangeTextHandler = this.ChangeTextHandler.bind(this)
  }


  onChangeTextHandler(newText){
      this.setState(
        {
          value: newText
        }
      )
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={this.onChangeTextHandler} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

顺便说一句，我收到错误“看起来您的大部分帖子都是代码，请添加更多详细信息”。但我没有什么可说的了。

Answer 1

我认为你尝试一下这个...

export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    }
  }


  onChangeTextHandler(newText){
      this.setState(
        {
          value: newText
        }
      )
      }


  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={(text) => this.onChangeTextHandler(text)} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}

Answer 2

您还可以通过其他 4 种方式绑定函数。对于初学者，请参考以下链接 https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56 。

您也可以像这样绑定：

export default class App extends Component {
  constructor(){
    super()
    this.state= {
      value: "default text"
    };
  }

  onChangeTextHandler = (newText) => {
    this.setState({
       value: newText
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text>Username:  </Text>
        <TextInput defaultValue = "username"
          onChangeText={(text) => this.onChangeTextHandler(text)} />
        <Text> You are writing {this.state.value}</Text>
        <Text>Password:  </Text>
        <TextInput  />
      </View>
    );
  }
}