react-native - 在不关闭键盘的情况下使用 TouchableOpacity 清除 Textinput？

Question

我想建立一个超级简单的聊天。为此，需要使用 TextInput 和 TouchableOpacity 来发送消息并清除 Textinput。

问题：当我发送消息时，Textinput 被清除，但是当再次开始写入时，旧文本再次复制到 Textinput 中（+ 新字符）。但是，如果在发送和清除所有内容后关闭键盘，则一切正常。

有没有办法用 TouchableOpacity 完全清除 TextInput？

下面是代码和我自己的一些尝试，但都没有奏效。提前致谢，

马菲纽斯

      <View style={{flexDirection: 'row'}}>
      <TextInput
      placeholder="Schreibe eine Nachricht"
      onChangeText={(text) => this.setState({newMsg : text})}
      style={{width: 300}}
      ref={'ref1'}
      />
      <TouchableOpacity
      onPress={this.sendMessage}
      >
      <Text> --> </Text>
      </TouchableOpacity>
      </View>
      

sendMessage = () => {
  this.state.MsgData.push({msg: this.state.newMsg, id: this.props.global.userId, timestamp: 8888});
  this.refs['ref1'].clear();
  this.setState({newMsg: ""});
  //this.refs['ref1'].setNativeProps({text: ''})
  //Keyboard.dismiss();

}

1. 项目清单

Answer 1

使用defaultValueprop 设置状态值（https://facebook.github.io/react-native/docs/textinput.html#defaultvalue）

<TextInput
  placeholder="Schreibe eine Nachricht"
  onChangeText={(text) => this.setState({newMsg : text})}
  style={{width: 300}}
  ref={(input) => this.ref1 = input}
  defaultValue={this.state.newMsg}
/>

有关完整实施，请参阅此示例：https ://snack.expo.io/SkuH8hKPb