时间戳

首页 > 解决方案 > 如何使用用户输入创建表？

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

问题描述

我是开发中的新手，所以欢迎任何帮助:)

这是我的问题：

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

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

到目前为止，我正在尝试使用 .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>);
}

标签： javascriptreactjsnext.jsuser-input

解决方案

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

其次，我将品牌列表放入brands功能handleChange中。然后使用此状态变量迭代.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>
  );
};

推荐阅读