时间戳

首页 > 解决方案 > 单击时将元素从一个容器转移到下一个容器

reactjs - 单击时将元素从一个容器转移到下一个容器

问题描述

我正在创建一个待办事项列表，用户可以在其中添加任务列表，一旦他们单击完成的复选框，它就会出现在另一个容器中

当我单击复选框时，我收到一条错误消息，提示 this.props.handleComplete(this.props.title) 不是函数。

App.js 是父组件，todo 是实际的 todo 项，active 和 completed 都是容器。

  import React from 'react';
   import Active from './Components/Active';
  import Completed from './Components/Completed';
   import Todoform from './Components/Todoform';
  import './App.css';

  class App extends React.Component {

 state = {
   items: [],
   task: '',
   id: 0,
   completedItems: []
 }

   handleInput = (event) => {
   this.setState({
    task: event.target.value
  })
 }

 handleSubmit = (event) => {
  event.preventDefault()

    const newTask = {
    id: this.state.id,
    title: this.state.task
   }
   const updatedItems = [...this.state.items, newTask]
    this.setState({
      items: updatedItems,
      task: '',
     id: this.state.id + 1
   })
 }

 handleComplete = (newTask) => {
    this.setState({completedItems: [...this.state.completedItems, 
     newTask]})

   }
      render() {
         return (
          <div id="main-content">
          <h1>Task Lister</h1>
           <Todoform
          handleChange={this.handleInput}
          handleSubmit={this.handleSubmit}
          task={this.state.task}
          />
          <Active
          items={this.state.items}
          handleComplete={this.handleComplete}
          />
          <Completed
           completedItems={this.state.completedItems}
          />
           </div>
       )
     }
   }

 export default App;


   import React from 'react'

   class Todo extends React.Component{

    state = {
     checked: false
   }

    handleCheck = () => {
       this.setState({
       checked: !this.state.checked
    })
  }

   handleClick = () => {
      if(this.state.checked){
       this.props.handleComplete(this.props.title)
     }
   }

  render(){
     const {title} = this.props

    return (
       <div className="ui checked checkbox">
        <input type="checkbox" checked={this.state.checked}    
     onChange={this.handleCheck} onClick={this.handleClick}/>
       <label>Completed {title}</label>
      </div>
    )
       }

      }
   export default Todo;


  import React from 'react'
  import Todo from './Todo'

 const Active = (props) => {
 const { items, handlecompletedList} = props


   return(
      <div id="activeList">
       <h2 className="position">Active</h2>
       <ul id="tasks">

          {
        items.map(item => {
          return(
            <Todo key={item.id} handlecompleted=.  
      {handlecompletedList} title={item.title}/>
             )
           })
          }

      </ul>
     </div>

   )
   }
           export default Active;

    import React from 'react'
    import Todo from './Todo'

   const Completed = (props) => {

   const { completedItems } = props

   return(
      <div id="completedList">
       <h2 className="position">Completed</h2>
       <ul id="tasks">
      {
    completedItems.map(item => {
      return(
        <Todo key={item.id} title={item.title}/>
      )
    })
  }
  </ul>
</div>

   )
   }
 export default Completed

标签： reactjs

解决方案

您正在发送handleComplete到<Active>组件，但它也需要发送到<ToDo>组件：

const Active = (props) => {
  const { items, ...,  ---> handleComplete <--- } = props

  ...
  return (items.map(item => (
    <Todo key={item.id} title={item.title} ... handleComplete={handleComplete} />
  ));
}

（一般来说，您的代码需要进行一些重新设计，您在组件之间进行冗余工作，但这是一个好的开始！）

推荐阅读