如何在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是我用于显示链接的组件。我正在尝试添加一个文本输入和一个在呈现的链接下方添加一个按钮，该链接将值添加到数组中，并且在每个链接旁边添加一个图标，以将其从数组中删除。我试图在一个函数renderLinks（）中完成所有操作，然后在render中调用它。我知道我必须从数组中推送和切片项目并更新状态，但是我正在努力，因为我刚刚开始学习反应。请帮忙：）

解决方法

您可以使用以下代码添加和呈现链接。

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;

让我知道进一步的澄清。

这是带有功能组件和挂钩的示例

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

这是结果：

最后，请阅读文档，管理状态至关重要。

arrays arrays javascript reactjs reactjs