Как создать таблицу с пользовательским вводом?

Question 1

Я новичок в разработке, поэтому любая помощь приветствуется :)

Вот моя проблема:

Я использую 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>);
}

javascript reactjs next.js user-input

0

Ewax_Du 1 Окт 2020 в 21:49

Answer

Попробуйте что-нибудь вроде следующего. Я извлек компонент 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>
  );
};

0

Ross Sheppard 3 Окт 2020 в 04:09

Question 2

Попробуйте что-нибудь вроде следующего. Я извлек компонент 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>
  );
};

0

Ross Sheppard 3 Окт 2020 в 04:09

Как создать таблицу с пользовательским вводом?

1 ответ

Похожие вопросы

Новые вопросы

javascript