出现this.State在React-native时保持警惕

Question

我正在使用React-Native创建一个应用。
我想显示用户在alert中输入的内容。
这是为了通知用户输入的内容已保存在系统中。

如何获取警报以在下面的代码中显示this.state.text？

import React, {Component} from 'react';
import {Alert, Button, Text, TextInput, View} from 'react-native';
export default class Text extends Component{
  state = {
    text: ""
  };
  handleTextChange = text =>{
    this.setState({text});
  };
  handleButtonPress(){
    Alert.alert(
      '保存しました!!',
      //I want to appear this.state.text here
    );
  };
  render() {
    return (
      <View>
        <Text>URL:&nbsp;{this.state.text}</Text>
        <TextInput placeholder='Textを入力してください' onChangeText={this.handleTextChange} value={this.state.text} />
        <Button title='保存する' onPress={this.handleButtonPress}/>
      </View>
    );
  }
}

请借给我你的力量。
谢谢。

Answer 1

2种方法可以实现这一目标，

1。使用箭头功能

handleButtonPress = () => {
  Alert.alert(
    '保存しました!!',
    this.state.text
  );
};

2。绑定您的（非箭头）功能，您只需要做以下1个选择

//choice 1: Bind on constructor
constructor(props) {
  super(props);
  this.handleButtonPress = this.handleButtonPress.bind(this)
}
handleButtonPress(){
  Alert.alert(
    '保存しました!!',
    this.state.text
  );
};
render() {
  return (
    <View>
      <Text>URL:&nbsp;{this.state.text}</Text>
      <TextInput placeholder='Textを入力してください' onChangeText={this.handleTextChange} value={this.state.text} />
//Choice 2: Bind it everytime you call the function
      <Button title='保存する' onPress={this.handleButtonPress.bind(this)}/>
    </View>
  );
}

Answer 2

确实像下面的更改：

import React, {Component} from 'react';
import {Alert, Button, Text, TextInput, View} from 'react-native';
export default class Text extends Component{
  state = {
    text: ""
  };
  handleTextChange = text =>{
    this.setState({text:text});  //////change here
  };
  handleButtonPress(){
    Alert.alert(this.state.text); ////////////show text from state
  };
  render() {
    return (
      <View>
        <Text>URL:&nbsp;{this.state.text}</Text>
        <TextInput placeholder='Textを入力してください' onChangeText={this.handleTextChange} value={this.state.text} />
        <Button title='保存する' onPress={this.handleButtonPress}/>
      </View>
    );
  }
}