Как я могу добавлять и удалять элементы из массива по щелчку в reactjs?

#javascript #arrays #reactjs

#javascript #массивы #reactjs

Вопрос:

Я пытаюсь создать функцию, которая отображает массив ссылок, и я хочу создать текстовый ввод и кнопку, которая добавляет значение из ввода в массив. Я получил ссылки, сохраненные в состоянии объекта, который выглядит следующим образом:

 sourceLinks: {
0: "https://www.w3schools.com/html/"
1: "https://www.apachefriends.org/docs/"
2: "https://docs.moodle.org/38/en/Windows_installation_using_XAMPP"
}

Мне удалось отобразить ссылки следующим образом:

 renderLinks() {
        
        let sessionLinks = this.state.sessionLinks;
        let links = [];
        Object.values(sessionLinks).map((link) => {
            links.push(<div className="column">
                <span>
                    <InputPreview inputValue={link} classes="w-300" />
                </span>
            </div>)
        })
        
        return links;

    }

InputPreview — это компонент, который я использую для отображения ссылок. Я пытаюсь добавить текстовый ввод и кнопку под отображаемыми ссылками, которая добавляет значение в массив, и значок рядом с каждой ссылкой, которая удаляет его из массива. Я пытаюсь сделать все это в одной функции Renderlins(), а затем вызвать ее в render. Я знаю, что мне нужно извлекать и нарезать элементы из массива и обновлять состояние, но я испытываю трудности, потому что я только начал изучать react. Пожалуйста, помогите 🙂

Ответ №1:

Вы можете добавлять и отображать ссылки с помощью приведенного ниже кода.

 import React from "react";

class ItemList extends React.Component {
  state = {
    links: ["item1"],
    newItem: ""
  };

  submit(e, newLink) {
    e.preventDefault();
    let updatedLinks = this.state.links;
    updatedLinks.push(newLink);
    this.setState({ links: updatedLinks });
  }

  render() {
    return (
      <React.Fragment>
        <ul>
          {this.state.links?.map((link, i) => (
            <li key={i}>
              <p>{link}</p>
            </li>
          ))}
        </ul>
        <form onSubmit={(e) => this.submit(e, this.state.newItem)}>
          <input
            type="text"
            value={this.state.newItem}
            onChange={(e) => this.setState({ newItem: e.target.value })}
          />
          <button type="submit">ADD</button>
        </form>
      </React.Fragment>
    );
  }
}

export default ItemList;

Дайте мне знать для дальнейших разъяснений.

1. Это работает, но не полностью. Это изменяет state.link и добавляет новую ссылку в массив, но не удаляет (визуализирует) новый массив. Он показывает только старый массив с существующими ссылками

2. Я создал изолированную среду для вашей справки. Пожалуйста, проверьте это, codesandbox.io/s/list-renderer-forked-hn6jc?file=/src/List.js

Ответ №2:

Это пример с функциональными компонентами и перехватами

 import React, { useState } from 'react';

const sourceLinks = [
  'https://www.w3schools.com/html/',
  'https://www.apachefriends.org/docs/',
  'https://docs.moodle.org/38/en/Windows_installation_using_XAMPP',
];

export const ListLinks = () => {
  const [links, setLinks] = useState(sourceLinks);
  const [newLink, setNewLink] = useState('');

  const handleAdd = () => {
    setLinks(links => [...links, newLink]);
  };
  const handleChangeNewLink = e => {
    const { value } = e.target;
    setNewLink(value);
  };
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'center' }}>
        <input type='text' value={newLink} onChange={handleChangeNewLink} />
        <button onClick={handleAdd}>Add</button>
      </div>
      <br />
      {links.map((link, index) => (
        <p key={index}>{link}</p>
      ))}
    </div>
  );
};

Это результат:

Наконец, прочитайте документацию, управление состоянием имеет важное значение.