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

Posted 2023-04-18

【中文标题】如何在 React-Native 组件的警报中显示 state

【英文标题】：How do I show state in an alert from a React-Native component如何在 React-Native 组件的警报中显示 state

【发布时间】：2019-02-09 20:35:40

【问题描述】：

我在测试时试图提醒我的 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;

【问题讨论】：

想想如何设置状态onChangeText。您是否正确处理text？你打电话给event listener 正确吗？

感谢 wlh - 发现问题了！ :)

【参考方案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
/>

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

【讨论】：

非常感谢 - 我错误地认为 handleChange 工作正常，因为我的文本在输入中更新，但您的摘要和解决方案是正确的，这解决了我的问题。谢谢。 :)

【参考方案2】：

这对我有用：

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