在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>

Answer 2

更改此代码

<input type="textarea" value={filter} onChange={(e) => setFilter(e.target.value)} rows={5} cols={60} />

到

<textarea name="exampleName" cols={60} rows={5} onChange={(e) => setFilter(e.target.value)}></textarea>

解释：

语义：使用正确的元素（
• <textarea>

  而不是

  <input>

  ）。

功能：行和列属性现在可以按预期工作。
可用：包括名称属性以支持表单提交和 改善结构。