CODEWITHSUNDEEP
javascriptreactjsreact-native
Kedar Dave
Kedar Dave

Reputation: 481

Clear TextInput onPress()

I have this chat screen in my app where I am sending a message with the help of a button next to it and with its onPress(),

Here is the code:

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

Now when I click on the Touchable icon, the textbox is not getting cleared, I don't understand why it is not happening.
I have changed the state again to have a blank text but still it is not happening.

Upvotes: 5

Views: 9383

Answers (3)

Chaitanya Sanoriya
Chaitanya Sanoriya

Reputation: 21

You can use useState.

just import by 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>
);

Upvotes: 2

user9806259
user9806259

Reputation: 

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

Upvotes: 0

sjahan
sjahan

Reputation: 5940

Bind the input value with the state.

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

Upvotes: 4

Related Questions