React Native get undefined is not an object 错误答案

【问题标题】：React Native get undefined is not an object errorReact Native get undefined is not an object 错误
【发布时间】：2018-08-10 14:55:18
【问题描述】：

我是原生反应的新手。

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

undefined 不是对象，正在评估 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,
  },
});

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

【问题讨论】：

将this.onChangeTextHandler = this.onChangeTextHandler.bind(this) 写入构造函数。没有名为ChangeTextHandler 的方法。你忘了加on。
是的。现在工作。谢谢。

标签： react-native

【解决方案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>
    );
  }
}

【讨论】：

【解决方案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>
    );
  }
}

【讨论】：