React Js：防止换行或在文本区域输入时提交

Question

代码：

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>
  );
};

您好，我怀疑如何在我的 textarea 中不允许换行并在按下按钮按钮时清理它当我的 click 事件被调用时清除 textarea 字段

Answer 1

只需防止这样的默认值Enter：

<textarea onKeyPress={e => {
  if(e.key === 'Enter')
     e.preventDefault()
  }}
/>