Textarea box will only allow one line of input- I want it to have multiple lines

Question

I am going nuts trying to get this box to work. I am using React 18.

Here is code that applies to this particular text box in various areas of my application:

In render part of component:

const [description, setDescription] = useState('');

JSX:

      <div className="event-form-container">
        <h1 id="event-title">Create a New Event</h1>
        <form className="create-event-form" onSubmit={handleSubmit}>
          <label className="event-label" for="description">
            Description
            <input
              id="description"
              className="event-input textarea"
              type="textarea"
              value={description}
              rows="5"
              cols="33"
              wrap="soft"
              onChange={(e) => setDescription(e.target.value)}
              />
          </label>
      </form>
    </div>

Various CSS from different files that have an impact on it:

input,
select {
    background-color: rgb(79, 73, 73);
    color: white;
    border-radius: 3px;
    box-sizing: border-box;
    width: 25%;
}

.textarea {

    height: 6em;
    display: inline-block;
}

.event-label,
.event-input {
    display: block;
    width: 25%
}

.event-input {
    position: absolute;
    padding: 10px;
}

The form itself is a flex box.

I suck at CSS and also the class of "event-input" applies to a bunch of other inputs that I am not showing here for brevity purposes.

Any clue what I can do to make this textarea stop acting like a 1 line text input??

Answer 1

你为什么不使用 textarea 标签

<textarea id="txtArea" rows="5" cols="33"></textarea>

Answer 2

您可能正在寻找 textarea 元素而不是 input 元素。 这是一个在 react 中使用 textarea 的小演示。

 const { useState } = React; const Example = () => { const [text, setText] = useState(""); return ( <div> <textarea value={text} onChange={e => setText(e.target.value)} rows="5" cols="33" > </textarea> <div>{text}</div> <button onClick={() => setText("")}> reset </button> </div> ); }; ReactDOM.createRoot( document.getElementById("root") ).render( <Example /> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 3

您需要使用textarea来获取多行处理而不是input

只是改变：

 <input id="description" className="event-input textarea" type="textarea" value={description} rows="5" cols="33" wrap="soft" onChange={(e) => setDescription(e.target.value)} />

至：

 <textarea id="description" className="event-input textarea" type="textarea" value={description} rows="5" cols="33" wrap="soft" onChange={(e) => setDescription(e.target.value)}> </textarea>