Question

我是新来的本地人。

当我在Android模拟器上运行代码时，出现此错误：

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

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

2 个答案: