如何在 React-Native 组件的警报中显示 {state}

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}
/>

现在的方式...每次更改输入文本时，您都将文本设置为未定义。长话短说...您正确地尝试在警报中打印状态值...您只是没有正确设置状态值，因此它始终未定义。

Answer 2

这对我有用：

alert('Title ' + this.state.text);