Javascript 如何处理通过布局（顶层）中呈现的模式从列表中删除项目？

我正在布局中呈现模式，模式的功能是删除待办事项列表中的列表项。如何将handledelete函数传递给modal

class TODO extends Component {

    handleDelete = (id) => {
     const newArr = this.state.TODOList.filter((item, idx) => {id !== 
    idx})
    this.setState({ TODOList: newArr }); 
    }

    render () {
      return this.state.TODOList.map((item, id) =>
            <div>
              <ITEMS
                idx={id}
                id={id}
              />
             </div>
         )
      }
}

class myModal extends Component {

    render () {
      return (
        <div>
          <button onClick={...???....}> Delete </Button>
        </div>
     )
    }
}

class Layout extends Component {
    render () {
      return (
        <div>
          <myModal />
         </div>
      )
    }
}

类TODO扩展组件{
handleDelete=（id）=>{
const newArr=this.state.TODOList.filter（（项，idx）=>{id！=
idx}）
this.setState（{TODOList:newArr}）；
}
渲染（）{
返回此.state.TODOList.map（（项，id）=>
)
}
}
类myModal扩展组件{
渲染（）{
返回(
删除
)
}
}
类布局扩展组件{
渲染（）{
返回(
)
}
}

您可以将函数作为道具传递下去

class TodoList extends Component {
    constructor () {
      this.setState({ TODOList: [...] })
    }
    handleDelete = (id) => {
     const newArr = this.state.TODOList.filter((item, idx) => {id !== 
    idx})
    this.setState({ TODOList: newArr }); 
    }
    render() {
       return (
         <div className="container">
            { return this.TODOList.map(todo, idx => { <TODO idx={idx} /> }) }
         <Modal handleDelete={this.handleDelete} />
         </div>
       )
    }
}

class myModal extends Component {
    constructor(props) {
       super(props)
    }
    render () {
      return (
        <div>
          <button onClick={() => this.handleDelete(this.idx)}> Delete </Button>
        </div>
     )
    }
}

class Layout extends Component {
    render () {
      return (
        <div>
          <myModal handleDelete={this.handleDelete} />
         </div>
      )
    }
}

类TodoList扩展组件{
构造函数（）{
this.setState（{TODOList:[…]}）
}
handleDelete=（id）=>{
const newArr=this.state.TODOList.filter（（项，idx）=>{id！=
idx}）
this.setState（{TODOList:newArr}）；
}
render（）{
返回(
{返回this.TODOList.map（todo，idx=>{}）
)
}
}
类myModal扩展组件{
建造师（道具）{
超级（道具）
}
渲染（）{
返回(
this.handleDelete（this.idx）}>Delete
)
}
}
类布局扩展组件{
渲染（）{
返回(
)
}
}

首先，您应该将

添加为

的子级。您可以设置它的
ref='todo'
。在
中创建一个
handleDelete
。使用todo的
ref
调用其
handleDelete
。并在
的道具中传递
handleDelete
。这适用于您想要拥有
TODO

class TODO extends Component {
    handleDelete = (id) => {
        const newArr = this.state.TODOList.filter((item, idx) => {id !==idx})
        this.setState({ TODOList: newArr }); 
    }
}  
class myModal extends Component {
    state = {idToDelete : 2}
    render () {
      return (
        <div>
          <button onClick={() => this.props.handleDelete(this.state.idToDelete)}> Delete </Button>
        </div>
     )
     }
}
class Layout extends Component {
    render () {
      return (
        <div>
          <myModal handleDelete={handleDelete} />
          <TODO ref="todo" />
         </div>
      )
    }
    handleDelete = (id) =>{
        this.refs.handleDelete(id);
    }

}

类TODO扩展组件{
handleDelete=（id）=>{
const newArr=this.state.TODOList.filter（（项，idx）=>{id！==idx}）
this.setState（{TODOList:newArr}）；
}
}  
类myModal扩展组件{
状态={idToDelete:2}
渲染（）{
返回(
this.props.handleDelete（this.state.idToDelete）}>Delete
)
}
}
类布局扩展组件{
渲染（）{
返回(
)
}
handleDelete=（id）=>{
本参考文献Handledelite（id）；
}
}
My TODO组件是布局组件的子组件。可以将handleDelete传递到layout吗？最好有一个名为TodoList的容器组件，并将列表保存在该组件中。然后，您可以将数据从TODOList组件传递到您的模态和TODO。您要删除的
id
。我的意思是哪个id将从myModal传递？对不起。我忘了包括我的项目组件。。它用于呈现我的TODO组件中的各个项目。因此，该ID是指一个项目ID。我将在上面的代码中编辑该ID。我的意思是当单击
myModal
时。您将如何访问必须在
myModal
Ah中删除的
id
。这是我问题的一部分。我不知道如何将数据传递给myModal，因为它是我当前设置布局的一部分。如果有更好的方法，有一种模式。单击该按钮时，将删除列表中的哪个项目？