代码:
const Chat = props => {
const dispatch = useDispatch();
const messages = useSelector(state => state.Chat);
const [text, setText] = React.useState('');
return (
<Styled.ChatBox>
<Styled.ChatHeader>
<p>Chat Bot</p>
<div>
<FontAwesomeIcon icon={faAngleDown} size="1x" color="white" />
<FontAwesomeIcon icon={faTimes} size="1x" color="white" />
</div>
</Styled.ChatHeader>
<Styled.ChatLog>
{/* <Styled.MessageWrapper bot={true}>
<Styled.BotImg src={BotLogo} bot={true} />
<Styled.ChatMessage bot={true}>
dsasasasasasasasasasa
</Styled.ChatMessage>
</Styled.MessageWrapper> */}
{messages.map(message => (
<Styled.MessageWrapper bot={true}>
<Styled.BotImg src={BotLogo} bot={false} />
<Styled.ChatMessage bot={true}>{message.text}</Styled.ChatMessage>
</Styled.MessageWrapper>
))}
</Styled.ChatLog>
<Styled.ChatInput>
<textarea
value={text}
onChange={e => setText(e.target.value)}
placeholder="Digite aqui sua mensagem"
/>
<button onClick={() => dispatch(sendMessage(text))}>
<FontAwesomeIcon icon={faPaperPlane} size="lg" color="black" />
</button>
</Styled.ChatInput>
</Styled.ChatBox>
);
};
您好,我很怀疑我将如何不允许在我的文本区域中换行并在按下按钮时清除它 调用我的点击事件时清除文本区域字段
最佳答案
像这样防止 Enter
的默认值:
<textarea onKeyPress={e => {
if(e.key === 'Enter')
e.preventDefault()
}}
/>
关于reactjs - react Js : prevent line breaks or submit on enter in the text area,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60008415/