Блог

Главная - Вопросы по программированию - Как мне сбросить поле ввода после нажатия кнопки для отправки моего сообщения

Как мне сбросить поле ввода после нажатия кнопки для отправки моего сообщения

#node.js #reactjs #websocket

#node.js #reactjs #websocket

Вопрос:

В приложении для чата я хотел бы сбросить () поле ввода, в которое я отправляю сообщения при нажатии, чтобы поле ввода снова стало пустым. Вот что у меня есть.

 const [message, setMessage] = useState(""); 
const [messages, setMessages] = useState([]); 
 
 const submit = (event) => {
event.preventDefault();
socket.emit("text-message", message);
    };
 
 <form onSubmit={submit} id="form">
    <div className="input-group">
        <input
            name="message"
            maxLength="60"
            type="text"
            placeholder="Message"
            className="form-control"
            onChange={(e) => {
            setMessage(e.currentTarget.value);
             }} 
            value={message}
            id="text"
            />
     <button id="send" type="submit" className="btn btn-primary">
        Send
     </button>
  </div>
</form>

Комментарии:

1. Можете ли вы просто установить сообщение в своей функции отправки после успешной отправки? т.е. setMessage('') . Или вам нужно что-то более продвинутое?

2. Это сделало это проще, чем ожидалось. Спасибо

Ответ №1:

Просто продолжение моего комментария, чтобы это можно было отметить как ответ. Я попытаюсь объяснить более подробно, чтобы любой, у кого есть подобная проблема, мог найти ответ более полезным.

Использование значения prop для ввода означает, что оно «контролируется«.

Это означает, что все, что вы когда-либо предоставляли для значения, — это то, что появится во входных данных.

Таким образом, изменить значение, отображаемое во входных данных, так же просто, как изменить переменную, используемую для значения prop, в данном случае message .

Как message создается useState правильным способом его обновления, в данном случае используется соответствующий метод setState setMessage . Это уже используется во фрагменте выше в событии onChange setMessage(e.currentTarget.value); для обработки обновления message по мере ввода данных пользователем.

Базовый сброс без специальной логики может быть достигнут с помощью setMessage(''); added to the end submit функции, которая используется для действия с формой.

 const submit = (event) => {
    event.preventDefault();
    socket.emit('text-message', message);
    setMessage('');
};
Метки: