Me estoy volviendo loco tratando de hacer que esta caja funcione. Estoy usando React 18.
Aquí hay un código que se aplica a este cuadro de texto en particular en varias áreas de mi aplicación:
En renderizar parte del componente:
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>Varios CSS de diferentes archivos que tienen un impacto en él:
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; }El formulario en sí es un cuadro flexible.
Apesto en CSS y también la clase de "entrada de evento" se aplica a un montón de otras entradas que no muestro aquí por motivos de brevedad.
¿Alguna pista de lo que puedo hacer para que esta área de texto deje de actuar como una entrada de texto de 1 línea?
¿Por qué no estás usando la etiqueta de área de texto?
<textarea id="txtArea" rows="5" cols="33"></textarea>Es posible que esté buscando un elemento de área de texto en lugar de un elemento de entrada. Aquí hay una pequeña demostración sobre el uso de textarea en reaccionar.
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>Debe usar un área de textarea para obtener el manejo de varias líneas, no input
Solo cambia:
<input id="description" className="event-input textarea" type="textarea" value={description} rows="5" cols="33" wrap="soft" onChange={(e) => setDescription(e.target.value)} />a :
<textarea id="description" className="event-input textarea" type="textarea" value={description} rows="5" cols="33" wrap="soft" onChange={(e) => setDescription(e.target.value)}> </textarea>