Как очистить TextInput на кнопку отправки в React нативный с редуксом

Question

Я работаю над приложением чата, использующим реагировать нативно с избыточным, где сообщения отправляются через кнопку отправки. Но всякий раз, когда я отправляю сообщение о нажатии кнопки отправки, TextInput не очищается. Я хочу очистить поле TextInput при нажатии кнопки отправки. Здесь я работаю в избыточности, поэтому я не хочу использовать state с value.

Вот код:

class Chat extends Component {

  componentWillMount() {
    this.props.fetchChat(this.props.receiverId);  
}

message(text) {
  this.props.writeMsg(text);    
}
onSend = () => {

  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
}

  render() {

    return (
      <View style={{ flex: 1 }}>

            <FlatList 
              inverted={-1}
              style={styles.list}
              extraData={this.props}
              data={this.props.convo}
              keyExtractor = {(item) => {
                return item.id;
              }}
              renderItem=   
              <ChatItem value={this.renderItem} />           
              />

             <MessageInput 
             onChangeText={text => this.message(text)}
             onPress={this.onSend }
            />          
      </View>
    );
  }
}

А это код компонента MessageInput:

  <View style={inputContainer}>
            <TextInput style={inputs}
                placeholder="Write a message..."
                onChangeText={onChangeText}
              />
          </View>

            <TouchableOpacity style={btnSend} onPress={onPress }>
              <Icon
            name='send'
            type='MaterialIcons'
            color='#fff'
            style={iconSend}
            />  
            </TouchableOpacity>

Answer 1

Вы можете использовать ref, чтобы очистить значение от Chat.

Добавить новую ссылку в свой конструктор

constructor(props) {
  super(props);
  this.textInput = React.createRef();
}

Передать ref в MessageInput.

render() {
  ...
  <MessageInput 
    onChangeText={text => this.message(text)}
    onPress={this.onSend }
    ref={this.textInput}
  />
  ...  
}

Изменить MessageInput (я предполагаю, что это функциональный компонент)

const MessageInput = (props, ref) => (
  ...
  <TextInput style={inputs}
    placeholder="Write a message..."
    onChangeText={onChangeText}
    ref={ref}
  />
  ...
)

Наконец, переключитесь обратно на компонент Chat и обновите onSend

onSend = () => {
  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
  this.textInput.current.clear(); // Clear the text input
}

Answer 2

Вы можете попробовать очистить свойство text после отправки сообщения (если текстовое свойство - то, что отображается в TextInput):

onSend = () => {

 const { userId , receiverId, text } = this.props;
 this.props.sendMessage({userId , receiverId, text});
 this.message('');
}

или

 onSend = () => {

  const { userId , receiverId, text } = this.props;
  this.props.sendMessage({userId , receiverId, text});
  this.props.writeMsg('');   
}