我要瘋了，試圖讓這個盒子作業。我正在使用反應 18。
以下是適用于我的應用程式各個區域中此特定文本框的代碼：
在組件的渲染部分：
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>
來自不同檔案的各種 CSS 對其有影響：
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;
}
表單本身就是一個彈性盒子。
我很討厭 CSS，而且“事件輸入”類適用于一堆其他輸入，為了簡潔起見，我沒有在這里展示。
任何線索我可以做些什么來讓這個 textarea 停止像 1 行文本輸入一樣？
uj5u.com熱心網友回復：
您可能正在尋找 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>uj5u.com熱心網友回復：
你為什么不使用 textarea 標簽
<textarea id="txtArea" rows="5" cols="33"></textarea>
uj5u.com熱心網友回復：
您需要使用 atextarea來獲得多行處理而不是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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/498421.html
標籤：javascript html css 反应 jsx
上一篇：如何檢查類星體陣列中是否存在值
下一篇：使用js在點擊時切換圖示符號