Javascript 反应-创建一个删除按钮，将其删除'；s DOM父项和相应的状态项

我有一个基本的待办事项列表，我不知道如何在每个待办事项中添加删除按钮。在传统的DOM编程中，我只需向按钮添加一个事件侦听器，并删除父级和相应的数组索引数据。对于React，我不太确定如何构建它

我的问题是：

只是让它工作起来

知道如何（以及是否）为该功能创建新组件

var TodoItems = React.createClass({

  render: function() {
      var attr = this.props
      var todoEntries = attr.entries;



      var listItems = todoEntries.map((item) => {
          return <li key={item.key}>{item.text} <input type="button" value="DELETE"></input></li>
      });

      return (
          <ul className="theList">
            {listItems}
        </ul>
      );
  }

});


var TodoList = React.createClass({
    getInitialState: function() {
        return {
            items: []
        };
    },

  addItem: function(e) {
      var itemArray = this.state.items;

      itemArray.push({
          text: this._inputElement.value,
          key: Date.now()
      });

      this.setState({
          items: itemArray
      });

      this._inputElement.value = "";

      e.preventDefault();
  },

  render: function() {

      return (
          <div className="todoListMain">
          <div className="header">
            <form onSubmit={this.addItem}>
              <input ref={(a) => this._inputElement = a}
               placeholder="enter task">
              </input>
              <button type="submit">add</button>
            </form>
          </div>

          <TodoItems entries={this.state.items}/>

        </div>
      );
  }
});




var destination = document.querySelector("#container");

ReactDOM.render(
  <div>
    <TodoList/>
  </div>,
  destination

var TodoItems=React.createClass({
render:function（）{
var attr=this.props
var todoEntries=属性项；
var listItems=todoEntries.map（（项）=>{
return
{item.text}
});
返回(

{listItems}

);
}
});
var TodoList=React.createClass({
getInitialState:函数（）{
返回{
项目：[]
};
},
附加项：函数（e）{
var itemArray=this.state.items；
itemArray.push({
text:this.\u inputElement.value，
关键字：Date.now（）
});
这是我的国家({
项目：itemArray
});
此项。_inputElement.value=“”；
e、 预防默认值（）；
},
render:function（）{
返回(
这个.\u inputElement=a}
占位符=“输入任务”>
添加
);
}
});
var destination=document.querySelector（“容器”）；
ReactDOM.render(
,
目的地

))

---

我认为最简单的方法是为TODO创建一个组件，该组件本身处理其已删除状态：

import React, { Component } from 'react'
import './Todo.css'

class Todo extends Component {
  constructor (props) {
    super(props)
    this.state = { deleted: false }
  }

  clickFunction (event) {
    this.setState({ deleted: true })
  }

  render () {
    const classes = ['todo', this.props.className]

    return (
      {
        !this.state.deleted
        ? <li>
          {this.props.todoName}
          <button
            className={classes.join(' ')}
            onClick={this.clickFunction.bind(this)}
            value={this.props.value}
          >delete</button>
        </li>
        : null
    )
  }
}

export default Todo

import React，{Component}来自“React”
导入“./Todo.css”
类Todo扩展组件{
建造师（道具）{
超级（道具）
this.state={deleted:false}
}
单击功能（事件）{
this.setState（{deleted:true}）
}
渲染（）{
const classes=['todo'，this.props.className]
返回(
{
！this.state.deleted
？

{this.props.todoName}
删除

：null
)
}
}
导出默认待办事项

先决条件理解 我相信，要开始回答您的问题，您需要对React背后的核心概念有一些坚实的理解

您的视图是数据的表示形式

React组件描述了如何向用户呈现数据。因此，如果希望更改视图中的某些内容，则应更改数据。

在几乎所有情况下，您都不需要考虑DOM操作。React将根据数据的更改更改您的视图

在传统的DOM编程中，我只需向按钮添加一个事件侦听器，并删除父级和相应的数组索引数据

进一步阅读

• ，特别是

解决方案

const{Component}=React；
const{render}=ReactDOM；
const defaultList=[
“项目1”，
“项目2”，
“项目3”，
];
常量列表=（道具）=>(

{props.items.map（（项目，索引）=>(

{item}


props.removietem（index）}>Remove

))}

);
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
项目：默认列表，
};
}
removeItem（removeIndex）{
this.setState（（状态）=>({
……国家，
项：this.state.items.filter（（项，索引）=>index！==removeIndex）
}))
}
重置（）{
this.setState（（状态）=>({
……国家，
项目：默认列表，
}))
}
render（）{
返回(
重置
);
}
}
render（，document.getElementById（'root'））

这几乎不可读。您应该明确地将ES6类与JSX一起使用。现有的大多数JavaScript都是在没有类语法的情况下完成的。如果因为我没有使用class关键字，所以您几乎看不懂，那么这不是我的错。使用React，您只需要更新状态（即从
状态中删除索引项。items
）。组件将被重新渲染，项目将从DOM中消失。谢谢，但我确实想知道如何通过一个单独的删除按钮组件进行此操作，以便于学习。我您需要一个单独的组件，然后只需将
单击功能
作为道具传递给
删除
组件即可（就像我在
onClick
事件中所做的那样，您只需将
按钮
组件替换为您自己的
DeleteTodo
组件。在
DeleteTodo
中，只需调用
this.props.onClick
）……或者您可以使用Redux。但是上面的注释说明了它的操作方式和反应方式。