TextInput 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"
  }
});

​

现在，当我在可触摸图标上单击时，textbox没有被清除，我不明白为什么它不会发生。

我又一次改变了状态，变成了一个空白的文本，但它仍然没有发生。

Answer 1

将输入值与状态绑定。

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

Answer 2

您可以使用useState。

只需由import {useState} from "react";导入

const [text, setText] = useState("");
const onChange = (textValue) => setText(textValue);
return (
    <View style={styles.container}>
        <TextInput
            placeholder="Item"
            style={styles.text}
            onChangeText={onChange}
            value={text}
        />
        <TouchableOpacity
            style={styles.btn}
            onPress={() => {
                //addItem.addItem(text);
                setText("");
            }}
        >
            <Text>Add</Text>
        </TouchableOpacity>
    </View>
);

Answer 3

           <TextInput
                style={styles.textInput} 
                  placeholder="Start to type.."
                  multiline={true}
                  maxLength={3000}
                  value={this.state.sms}
                  onChangeText={(sms)=>this.setState({sms})}
                />