Question

我有以下屏幕：

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

export default class AuthorizationScreen extends Component {
  constructor(props) {
    super(props);
    this.state = { login: '', password: '' };
    this.onPressSignIn = this.onPressSignIn.bind(this);
  }

  onPressSignIn = () => {
    Alert.alert(this.state.login + this.state.password);
  };

  render() {
    return (
      <View styles={styles.container}>
        <View styles={styles.authorization}>
          <TextInput
            placeholder="Enter login"
            onChangeText={login => this.setState({ login })}
            value={login}
          />

          <TextInput
            placeholder="Enter password"
            onChangeText={password => this.setState({ password })}
            value={password}
          />

          <TouchableOpacity
            onPress={this.onPressSignIn}
          >

            <View>

              <Text>Search</Text>

            </View>

          </TouchableOpacity>
        </View>
      </View>

    );
  }
}

如您所见，状态中定义了2个变量：登录名和密码。此变量应保留TextInputs中的数据。但是当我运行项目时，出现以下错误：

ExceptionsManager.js:74 ReferenceError: login is not defined

This error is located at:
    in AuthorizationScreen (at SceneView.js:9)
    in SceneView (at SwitchView.js:12)
    in SwitchView (at createNavigator.js:61)
    in Navigator (at createAppContainer.js:429)
    in NavigationContainer (at App.js:54)
    in RCTView (at View.js:45)
    in View (at App.js:52)
    in Provider (at App.js:51)
    in App (at withExpoRoot.js:20)
    in RootErrorBoundary (at withExpoRoot.js:19)
    in ExpoRootComponent (at renderApplication.js:35)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:98)
    in RCTView (at View.js:45)
    in View (at AppContainer.js:115)
    in AppContainer (at renderApplication.js:34)

我不明白为什么会发生这种情况，因为我定义了变量并绑定了与此变量配合使用的函数。那么，怎么了，我该如何解决？

Answer 1

在两个TextInput上的值处编辑代码

value={this.state.login}
value={this.sate.password}

Answer 2

在您的render()方法中，要访问login和password状态属性，您需要以下行：

const { login, password } = this.state

Answer 3

<View styles={styles.authorization}>
  <TextInput
    placeholder="Enter login"
    onChangeText={login => this.setState({ login })}
    value={this.state.login}
  />

  <TextInput
    placeholder="Enter password"
    onChangeText={password => this.setState({ password })}
    value={this.state.password}
  />
</View>

Answer 4

我认为您应该在将它们分配给状态之前在构造函数中声明它们（两个未定义的变量）。即：

允许登录；设置密码；

Answer 5

让我向您解释一些基本知识，

考虑一个对象，

const myObj = {key1:'value1',key2:'value2'}

现在，如果您想从key2访问myObj，则可以执行此操作，

myObj.key2   //here you access object key using object name

在此处应用相同的概念

this.state = { login: '', password: '' }

this.state是一个对象，包含login和password键。

现在要使用这些密钥，您应该使用对象名称访问它们

<TextInput
  placeholder="Enter login"
  onChangeText={login => this.setState({ login })}
  value={this.state.login}   //aceess `login` using `this.state`
/>

<TextInput
  placeholder="Enter password"
  onChangeText={password => this.setState({ password })}
  value={this.state.password}  //aceess `password` using `this.state`
/>

Answer 6

您应该在构造函数之前声明您的状态，在render函数中初始化somes const并使用它们来设置您的状态：）

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

export default class AuthorizationScreen extends Component {

    state = {
        login: '',
        password: ''
    }

    constructor(props) {
        super(props);
        this.onPressSignIn = this.onPressSignIn.bind(this);
    }

    onPressSignIn = () => {
        Alert.alert(this.state.login + this.state.password);
    };

    render() {
        const {login, password} = this.state
        return (
            <View styles={styles.container}>
                <View styles={styles.authorization}>
                    <TextInput
                        placeholder="Enter login"
                        onChangeText={value => this.setState({ login: value })}
                        value={login}
                    />

                    <TextInput
                        placeholder="Enter password"
                        onChangeText={value => this.setState({ password: value })}
                        value={password}
                    />

                    <TouchableOpacity
                        onPress={this.onPressSignIn}
                    >

                    <View>

                        <Text>Search</Text>

                    </View>

                    </TouchableOpacity>
                </View>
            </View>

        );
    }
}

变量是状态未定义

6 个答案: