Блог

Главная - Вопросы по программированию - Попытка динамического добавления новых строк в React

Попытка динамического добавления новых строк в React

#javascript #html #css #reactjs

Вопрос:

Привет, я довольно новичок в React и пытаюсь добавить новые элементы в массив, которые затем отображаются при нажатии кнопки.

пример

Внизу будет добавлен новый заголовок с именем, введенным в текстовое поле.

Вот мой код:

 import React, { useState } from "react";
import "./App.css";
import { Container, Button, Input } from "reactstrap";

function Row(props) {
  return (
    <li class="columnBox">
      {props.title}
    </li>
  );
}

export default function App() {

  const rows = [
    { title: "title 1"},
    { title: "title 2"},
    { title: "title 3"}
  ];

  return (
    <div className="App">
      <h1>Add new titles</h1>

      <form onSubmit={() => {
        event.preventDefault();
        rows.push({ title: "newRow"})
      }}>
      <Input type="text" name="email" id="newRow" placeholder="" />
      <Button type="submit">add</Button>
        </form>

        <ul>
        {rows.map((row) => (
              <Row title={row.title} />
            ))}
        </ul>

    </div>
  );
}

Комментарии:

1. в чем проблема

2. Проблема в том, что новые заголовки, добавленные в массив, не отображаются

Ответ №1:

Для этого вам придется воспользоваться state . Приложение React обычно повторяется, когда происходит изменение в state или prop .

 export default function App() {

    const [rows, setRows] = useState([
      { title: "title 1"},
      { title: "title 2"},
      { title: "title 3"}
    ]);
  
    return (
      <div className="App">
        <h1>Add new titles</h1>
  
        <form onSubmit={() => {
          event.preventDefault();
          setRows([
              ...rows,
              {title: "newRow"}
          ])
        }}>
        <Input type="text" name="email" id="newRow" placeholder="" />
        <Button type="submit">add</Button>
          </form>
  
          <ul>
          {rows.map((row) => (
                <Row title={row.title} />
              ))}
          </ul>
  
      </div>
    );
  }

Ответ №2:

вы можете использовать useState и обновлять состояние

 import React, { useState } from "react";
import "./App.css";
import { Container, Button, Input } from "reactstrap";
export default function App() {
    const [rows, setRows] = useState([
      { title: "title 1"},
      { title: "title 2"},
      { title: "title 3"}
    ]);
  
    return (
      <div className="App">
        <h1>Add new titles</h1>
  
        <form onSubmit={() => {
          event.preventDefault();
          setRows([
              ...rows,
              {title: "newRow"}
          ])
        }}>
        <Input type="text" name="email" id="newRow" placeholder="" />
        <Button type="submit">add</Button>
          </form>
  
          <ul>
          {rows.map((row) => (
                <Row title={row.title} />
              ))}
          </ul>
  
      </div>
    );
  }
Метки: