在输入字段中按回车键时如何创建新行？

Question

我需要在按下回车键时创建一个换行符，并且只有在单击按钮时才提交表单。

<form className="message_form" onSubmit={handleSubmit} >
     
      <div>
        <input
          type="text"
          placeholder="Enter message"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
      </div>
      <div>
        <button className="btn">Send</button>
      </div>
    </form>

Answer 1

为了让敌人在点击按钮时提交，您需要从标签中删除 onSubmit ，然后让您的按钮 type="submit" 。如果单击按钮，这将提交表单。对于输入，您需要捕获按键事件（假设您在输入字段时正在谈论输入）作为（此代码将进入您的输入字段的 onChangeHandler：

if (e.key === 'Enter') {
      setMakeTheLineVisible(true)
 }

获得回车键后，您可以切换状态，这将使您想要的行在页面上可见。

Answer 2

您可以使用文本区域代替输入框，并在发送按钮上添加点击事件。它看起来像这样：

import React, { useState } from "react";
import './App.css'
const App = () => {
  const [text, setText] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log("text", text);
  };

  return (
    <form className="message_form">
      <div>
        <textarea
          type="text"
          placeholder="Enter message"
          rows={4}
          value={text}
          onChange={(e) => {
            setText(e.target.value);
          }}
        >
          {text}
        </textarea>
      </div>
      <div>
        <button className="btn" onClick={handleSubmit}>
          Send
        </button>
      </div>
    </form>
  );
};

export default App;

你可以在这里查看更多信息，这是一个类似的问题。可能会进一步帮助你 - Similar question on SO

在输入字段中按回车键时如何创建新行？

How can I create a new line when hit enter in an input field?

html

forms

jsx

reactjs