Как мне показать {состояние} в предупреждении от компонента React-Native?

Question

Я пытаюсь предупредить содержимое моего компонента TextInput во время тестирования. Код находится в функции handleSubmit () ниже (строка 22). В данный момент появляется предупреждение, но все, что я получаю, это «Заголовок», а this.state.text не появляется. Я пробовал все виды фигурных скобок, скобок и т. Д.

Пожалуйста, кто-нибудь может сообщить мне, что я делаю неправильно, и как я могу получить доступ к своему состоянию в виде предупреждения? Поможет мне для тестирования в будущем. Я новичок в React Native, так что я благодарен за любую помощь в этом. Спасибо vm!

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

class GBTextInput extends Component {
  constructor(props) {
    super(props);
    const {placeholder, text, label} = props;
    this.state = {
      text,
      placeholder,
      label
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({text});
  }

  handleSubmit(event) {
    Alert.alert(
      'Title'+this.state.text,
      'I am a message'
    );
    event.preventDefault();
  }

  render() {
    const {text, placeholder, label} = this.state;
    const {containerStyle, labelStyle, inputStyle, buttonStyle} = styles;

    return(
      <View>
      <View style={containerStyle}>
        <View style={labelStyle}>
          <Text>{label}</Text>
        </View>
        <TextInput
          placeholder={placeholder}
          style={inputStyle}
          onChangeText={(text) => this.handleChange}
          value={text}
          onSubmitEditing={(text) => this.handleSubmit}
        />
      </View>
      <TouchableOpacity style={buttonStyle} onPress={this.handleSubmit}>
        <Text>PRESS ME</Text>
      </TouchableOpacity>
      </View>

    );

  }
}

const styles= StyleSheet.create ({
  containerStyle: {
    flexDirection: 'row',
    margin: 6
  },
  buttonStyle: {
    alignSelf: 'stretch',
    margin: 6,
    padding: 6,
    height: 40,
    borderRadius: 10,
    alignItems: 'center',
    justifyContent: 'center',
    borderColor: 'blue',
    borderWidth: StyleSheet.hairlineWidth
  },
  labelStyle: {
    height: 40,
    width: '20%',
    alignItems: 'flex-end',
    justifyContent: 'center',
    paddingRight: 6
  },
  inputStyle: {
    height: 40,
    width: '80%',
    borderColor: 'gray',
    borderRadius: 10,
    borderWidth: StyleSheet.hairlineWidth,
    position: 'relative',
    paddingLeft: 6
  },
});

export default GBTextInput;

Answer 1

Я думаю, ваша проблема здесь:

handleChange(event) {
  this.setState({text});
}

Должно быть:

handleChange(text) {
  this.setState({text});
}

Вам также нужно передать значение в функцию handleChange:

<TextInput
  placeholder={placeholder}
  style={inputStyle}
  onChangeText={(text) => this.handleChange(text)}
  value={text}
  onSubmitEditing={(text) => this.handleSubmit}
/>

или

<TextInput
  placeholder={placeholder}
  style={inputStyle}
  onChangeText={this.handleChange}
  value={text}
  onSubmitEditing={(text) => this.handleSubmit}
/>

То, как это сейчас ... Вы устанавливаете текст на неопределенный каждый раз, когда они изменяют текст ввода. Короче говоря ... Вы правильно пытаетесь напечатать значение состояния в своем предупреждении ... Вы просто неправильно устанавливаете значение состояния, поэтому оно всегда неопределено.