清除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。

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

return _blContext.place1s.Where(x => x.IsActive == true).Select(r => new placeDto
            {
                ID = r.place1ID,
                Citys = _blContext.Citys.Where(x => x.IsActive == true && x.place1ID == r.place1ID).Select(r2 => new BaseCityDto
                {
                    ID = r2.CityID
                }).OrderBy(o => o.ID)
            })
            .OrderBy(o => o.ID)
            .ToList();

Answer 3

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