javascript - 如何动态创建和删除具有自己的删除按钮的元素(包含输入、p-s、按钮)

Question

嗯，情况是:这是一个react应用程序，有一个按钮，它创建一个带有自己的删除按钮的元素。创建的元素包含输入、段落标签和按钮。我已经好几天无法删除的错误是:让我们假设删除第 n 个这样的元素，其中有一个段落 p {index} /p (index =n)和 input input type="text" {index} /input ，问题是删除元素后(我们看不到它的段落不再)输入的文本将替换第 n+1 个输入的文本，第 n+1 个输入的文本将替换 n+2 -th 输入的文本等等。当n+k等于列表大小时，第n+k输入消失。

const defaultList=[];
const List = (props) => (
    <ul>
      {props.items.map((item, index) => (
        <li key={index}>
          {item}
          <br />
          <button onClick={() => 
            props.removeItem(index)}>Remove</button>
        </li>
      ))}
    </ul>
  );

export default class Accounts extends React.Component {
    constructor(props) {
        super(props);
        this.addItem = this.addItem.bind(this);
        this.state={
            items: defaultList,
            created:0
        }    
    }

    removeItem(removeIndex) {
        this.setState((state) => ({
          ...state,
          items: this.state.items.filter((item, index) => index !== removeIndex)
        }))
      }

    addItem(){
        const temp = this.state.items;
        temp.push(
        <div>
            <p>{this.state.created}</p>
            <input name="text" type="text" id={"input "+this.state.created}/>
            </div>
        );
        this.setState(() => ({
            items: temp,
            created:++this.state.created
        }))
    }
    render(){
    return(<div>
    <List items={this.state.items} removeItem={this.removeItem.bind(this)} />
    <button  onClick={this.addItem}>Add item</button>
    </div>
    }
}

好吧，我无法提供图像如何工作，因为这是我的第一篇文章，我需要至少 10 个评分才能添加图像:/

Answer 1

我认为您应该编写的这段代码中唯一的问题

const temp = [...this.state.items];

在 addItem 处理程序中，否则一切都很好