如何使用用户输入创建表？

Question

我是开发新手，欢迎任何帮助:)

这是我的问题：

我正在使用 next.js - 这可能很重要，因为 f.ex。 document.createElement 似乎只适用于 useEffect。

我创建了一个文本区域，用户可以在其中添加用逗号分隔的单词（例如“Nike、Adidas、New Balance”）。我想重写下面的现有代码，以便：

• 表格仅在用户在输入框中添加内容时可见/出现
• 输入框中的每个单词（例如 Nike、Adidas）都会在表中创建一个新行（在表头“品牌”中）。

到现在为止，我正在尝试使用 .split 和 .forEach 方法来创建一个新的元素（表）。但我就是无法让它发挥作用——也许这不是正确的解决方案。欢迎任何帮助！

function Analyzer() {
  
  const [brand, setBrand] = React.useState('');
  const handleChange = (event) => {
    setBrand(event.target.value.split(','))};
  
  return(            
    <div>
      <textarea type="text" 
              placeholder="Example:
              Nike, Adidas, New Balance ..." 
              onChange={handleChange}></textarea>

      <table className={styles.table}>
         <thead>
             <tr>
                <th>No.</th>
                <th>Brand</th>
                <th>Also known as</th>
                <th>Avg. price</th>
             </tr>
          </thead>
          <tbody>
              <tr>
                 <td>1</td>
                 <td>{brand}</td>
                 <td></td>
                 <td><input type= "number"></input>%</td>
              </tr>
          </tbody>
      </table>

     </div>);
}

Answer 1

尝试以下方法。我所做的是将Table 组件提取出来，并在其中放置任何渲染条件。你甚至可以为这个组件创建一个单独的文件并将任何相关的 props 传递给它。

其次，我在handleChange 函数中将品牌列表设置为brands。然后使用.map 迭代此状态变量以呈现表中的每一行。

function Analyzer() {
  const [brands, setBrands] = React.useState([]);

  const handleChange = ({ target }) => {
    const { value } = target;
    setBrands(value.split(','));
  };

  const Table = () => {
    if (!brands || brands.length === 0) return null;

    return (
      <table className={styles.table}>
        <thead>
          <tr>
            <th>No.</th>
            <th>Brand</th>
            <th>Also known as</th>
            <th>Avg. price</th>
          </tr>
        </thead>
        <tbody>
          {brands.map((brand) => (
             <tr>
               <td>1</td>
               <td>{brand}</td>
               <td></td>
               <td><input type= "number"></input>%</td>
             </tr>
           )}
        </tbody>
      </table>
    );
  };

  return(            
    <div>
      <input 
        onChange={handleChange}
        placeholder="Example: Nike, Adidas, New Balance ..."
        type="text"
        value={brands}
      />
      <Table />
   </div>
  );
};