以reactJS形式设置输入<textarea>中的行和列

Question

我有一个 ReactJS 函数，它将长文本字符串作为输入并将其用于进一步处理：

import React, { useState } from "react";
import p21logo from '../images/p21logo-002-1.png'; // with import

export default function SetFilter() {
const filter1 = {"exaltG.Ju": {"$eq": true}}
const [filter, setFilter] = useState(JSON.stringify(filter1));
 
  const handleSubmit = (e) => {
    e.preventDefault()
    const message = `data is ${filter}`;
    window.alert(message);
    window.open(`/getfilteredrecords/${filter}`);
  };
 
 return (
   <div>
       <table>
           <tr>
            <td>
            C<img src={p21logo} alt="ParasharLogo"></img>  
            </td>
            <td>
            <form onSubmit={handleSubmit}>
              <p>Set Filter :</p>
              <label>
                <input 
                  type="textarea" 
                  value={filter}
                  onChange={(e) => setFilter(e.target.value)}
                  rows={5}
                  cols={60}
                />
                
              </label>
              <br></br>
              <input type="submit" />
            </form>  
            </td>
          </tr>
      </table>
   </div>
 );
}

但是，无论我将文本区域的行数和列数设置为多少，显示的都是小的单行默认文本字段。虽然我仍然可以在这个小字段中输入大文本字符串，但通过向右滚动，如果我能提供一个大区域会更好，因为这显然可以帮助用户直观地查看是否已正确输入全文。我应该如何更改我的代码以提供更大的数据输入文本区域？

Answer 1

您需要使用TextArea

<textarea name="Text1" cols="60" rows="5"></textarea>

以reactJS形式设置输入<textarea>中的行和列

Setting rows and columns in input <textarea> in reactJS form

textarea

input

reactjs