react写一个对话功能
时间: 2023-07-01 08:20:45 浏览: 42
好的,我可以提供一个简单的React对话组件的代码示例:
```
import React, { useState } from 'react';
function Dialog() {
const [messages, setMessages] = useState([]);
const [inputValue, setInputValue] = useState('');
function handleInputChange(event) {
setInputValue(event.target.value);
}
function handleSendMessage() {
if (inputValue.trim() !== '') {
setMessages([...messages, { text: inputValue, isUserMessage: true }]);
setInputValue('');
}
}
function handleKeyDown(event) {
if (event.key === 'Enter') {
handleSendMessage();
}
}
return (
<div>
<div>
{messages.map((message, index) => (
<div key={index} className={message.isUserMessage ? 'user-message' : 'bot-message'}>
{message.text}
</div>
))}
</div>
<div>
<input type="text" value={inputValue} onChange={handleInputChange} onKeyDown={handleKeyDown} />
<button onClick={handleSendMessage}>Send</button>
</div>
</div>
);
}
export default Dialog;
```
这个组件包含一个输入框和一个发送按钮,用户可以在输入框中输入消息并发送给机器人或其他用户。组件会将发送的消息显示在对话框中,并根据消息类型来显示不同的样式。当用户按下回车键时,会自动发送消息。