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

Question

我在我的布局中呈现我的模式，模式的功能是删除我的待办事项列表中的列表项。如何将该句柄删除功能传递给模态？

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

标签： javascriptcssreactjs

Answer 1

首先，您应该添加<TODO>为. 您可以设置它的.Create a in 。使用 todo调用它。并传入的道具。这适用于您想要有一个状态的情况<Layout>ref='todo'handleDelete<Layout>handleDeleterefhandleDelete<myModal>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);
    }

}