javascript - 清除文本输入 onPress()

Question

我的应用程序中有这个聊天屏幕，我在旁边的 button 及其 onPress() 的帮助下发送消息，

代码如下:

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  TextInput,
  Button,
  Image,
  TouchableOpacity,
  Picker,
  AsyncStorage
} from "react-native";
import axios from "axios";
import { Dropdown } from "react-native-material-dropdown";
import { Input } from "native-base";

class MessageForm extends Component {
  state = {
    message: "",
    rc_id: this.props.rc_id,
    usertype: this.props.usertype,
    senderid: this.props.userid,
    subject: this.props.subject
  };

  sendMessage = async () => {
    console.log(
      this.state.rc_id,
      this.state.usertype,
      this.state.senderid,
      this.state.message,
      this.state.subject
    );
    try {
      let { data } = await axios
        .post("https://tgesconnect.org/api/Communicate_class", {
          userid: this.state.rc_id,
          usertype: this.state.usertype,
          message: this.state.message,
          senderid: this.state.senderid,
          subject: this.state.subject
        })
        .then(response => {
          console.log(response.data);
          this.setState({
            message: ""
          });
        });
    } catch (err) {
      console.log(err);
    }
  };

  render() {
    return (
      <View>
        <View style={styles.container}>
          <Input
            style={styles.textInput}
            placeholder={this.props.message}
            underlineColorAndroid="transparent"
            onChangeText={message => {
              this.setState({ message });
            }}
          />

          <TouchableOpacity
            style={styles.button}
            onPress={() => {
              this.sendMessage();
            }}
          >
            <Image source={require("../../Assets/Images/ic_send.png")} />
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}
export default MessageForm;

const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "row",
    minWidth: "100%",
    backgroundColor: "#eeeeee",
    borderTopColor: "#cccccc",
    borderTopWidth: 1,
    flex: 1,
    justifyContent: "flex-end"
  },
  textInput: {
    flex: 1,
    backgroundColor: "#ffffff",
    height: 40,
    margin: 10,
    borderRadius: 5,
    padding: 3
  },
  button: {
    flexShrink: 0,
    width: 40,
    height: 40,
    marginTop: 10,
    marginRight: 10,
    marginBottom: 10,
    alignItems: "center",
    justifyContent: "center"
  },
  container1: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

现在，当我单击 Touchable 图标时，文本框 没有被清除，我不明白为什么它没有发生。
我再次将状态更改为空白文本，但它仍然没有发生。

Answer 1

将输入值与状态绑定(bind)。

<Input
   style={styles.textInput}
   placeholder={this.props.message}
   underlineColorAndroid="transparent"
   onChangeText={message => {this.setState({ message });}}
   value={this.state.message}
/>