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

Question

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

这是我的问题：

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

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

table 只是 visible/appears，当用户在输入框中添加内容时
输入框中的每个单词（f.ex。耐克、阿迪达斯）在 table（在 table 标题“品牌”中）创建一个新行。

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

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 组件并将其渲染的任何条件放入其中。您甚至可以为这个组件创建一个单独的文件，并将任何相关的道具传递给它。

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

中的每一行

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>
  );
};

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

How to create a table with user input?

javascript

user-input

reactjs

next.js