时间戳

首页 > 解决方案 > 如何在反应中删除列表中的元素？

reactjs - 如何在反应中删除列表中的元素？

问题描述

我正在尝试用 react 做一个简单的 toDo 应用程序。我无法删除列表中的元素。这是我的代码；第一个状态：

class AppForm extends Component {

  constructor(props) {
    super(props);

    this.state = { items: [] , text:''};
    this.onChangeHandler=this.onChangeHandler.bind(this)
    this.submitHandler=this.submitHandler.bind(this)
  }

//将输入值设置为状态文本

 onChangeHandler = (e) => {
    this.setState({
      text: e.target.value
    });
  };

//将状态的文本项推送到项目中

    submitHandler = (e) => {
        e.preventDefault();
    
        const arrayItem = {
            text: this.state.text,    
        };
    
    this.setState(state => ({
        items: state.items.concat(arrayItem),
        text: ''
    }));
 }

这里是问题区域。我也试过拼接，但不能。

 deleteItem=(index)=>{

    let todos= this.state.items.filter(todo => index !== todo.key)
    this.setState({
        items : todos
    })    
 }

然后渲染..

render() {
    return (
      <div>
        <h1>toDo App</h1>

        <form onSubmit={this.submitHandler}>
          <label>Type the task you want to do!</label>
          <input type="text" onChange={this.onChangeHandler} value={this.state.text}/>
        </form>

        <ul>
            {this.state.items.map((item,index) =>{
                return (
                <li key={index}> {item.text}
                    <p onClick={this.deleteItem.bind(this,index)}> X </p>
                </li>
                )
            })}
        </ul>    
      </div>
    );
  }
}

export default AppForm;

标签： reactjs

解决方案

拼接就是答案。

首先，我创建您的状态数组的副本。然后使用单击的索引将其拼接。然后用拼接的数组设置 setState。

删除项目=（索引）=>{

let todos= [...this.state.items]

todos.splice(index, 1)

this.setState({
    items : todos
})

}

推荐阅读