Решение задания

Space of React

Решение заданияЧат интерфейс — Cоздание React компонентов | Max Roslow | Space of React


const inputRef = useRef(null);

<input ref={inputRef} />

// Теперь можно работать с элементом:
inputRef.current.focus(); // Установить фокус


const messagesEndRef = useRef(null);

<div className="messages">
    {messages.map(msg => <div>{msg.text}</div>)}
    <div ref={messagesEndRef} /> {/* Якорь для прокрутки */}
</div>


messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });


const time = new Date().toLocaleTimeString('ru-RU', { 
    hour: '2-digit', 
    minute: '2-digit' 
});
// Результат: "14:35"


setTimeout(() => {
    // Код выполнится через 1.5 секунды
    addBotMessage('Привет!');
}, 1500);


function ChatInterface() {
    //...
    const messagesEndRef = useRef(null);
    
    useEffect(() => {
        //...
    }, [messages]);
    
    const scrollToBottom = () => {
        messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' });
    };
    
    const sendMessage = (e) => {
        e.preventDefault();
        //...
    };
    
    return (
        <div className="chat-container">
            <div className="chat-messages">
                {messages.map(message => (
                    <div key={message.id} className={/*...*/}>
                        {/*...*/}
                    </div>
                ))}
                
                <div ref={messagesEndRef} />
            </div>
            
            <form onSubmit={sendMessage}>
                <input 
                    value={inputValue}
                    onChange={(e) => setInputValue(e.target.value)}
                />
                <button type="submit" disabled={/*...*/}>
                    ➤
                </button>
            </form>
        </div>
    );
}

Войдите, чтобы смотреть видео

Чат-интерфейс

Задание