Question

我想通过将方法分配给属性来将方法分配给另一个类，但是我得到一个错误，它不是函数。

我在Codepen https://codepen.io/bagdaulet/pen/PXBKKR中的代码

我希望元素可以被另一类调用的方法中的方法删除和更新。

但是我得到一个错误

sudo fuser -k port/tcp
sudo fuser -k 8001/tcp

Answer 1

发生此错误是因为TodoList呈现器中给定的映射函数未绑定到您的this上下文，您可以通过绑定它或使用保留this上下文的箭头函数来解决此问题。父母的：

this.state.list.map((item, i) => {
    return (
        <Task
            key={i}
            index={i}
            removeHandle={this.removeTask}
            updateHandle={this.updateTask}
            task={item}
        />
    )
})

我也刚刚注意到，您的removeTask和updateTask函数也未绑定，从而使this.state未定义，它们也应转换为箭头函数。

完整的工作代码：

class TodoList extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         list: [
            'Call Mom',
            'Schedule annual checkup',
            'Outline chapter 5',
            'Add cover sheets',
            'Plan backyard herb garden',
            'Pick up milk',
            'Research self-publishing services'
         ]
      }
      this.removeTask = this.removeTask.bind(this);
   }
   
   removeTask = i => {
      let temp_arr = this.state.list;
      temp_arr.splice (i, 1);
      this.setState({
         list: temp_arr
      })
   }
   
   updateTask = (text, i) => {
      let temp_arr = this.state.list;
      temp_arr[i] = text;
      this.setState({
         list: temp_arr
      })
   }
   
   testw(){
      console.log('ww');
   }
   
   render() {
      return (
         <div className='todo'>
            {
               this.state.list.map((item, i) => {
                  return (
                     <Task 
                        key={i} 
                        index={i}
                        removeHandle = {this.removeTask}
                        updateHandle = {this.updateTask}
                        task={item}
                        />
                  )
               })
            }
            
         </div>
      );
   }
   
}



class Task extends React.Component {
   constructor(props) {
      super(props);
      this.state = {edit: false};
   }

   edit = () => {
      this.setState({
         edit: true
      })
   }
   
   save = () => {
      let newValue = this.refs.newTask.value;
      
      this.props.updateHandle(newValue, this.props.index);
      
      this.setState({
         edit: false
      })
   }

   remove = () => {
      this.props.removeHandle(this.props.index);
   }

   editForm() {
      return(
         <div className="task edited">
            <input ref="newTask" className="task__field" defaultValue={this.props.task} />
            <button onClick={this.save} className="task__btn-save"></button>
         </div>
      );
   }

   Form() {
      return(
         <div className="task">
            <div className="task__name">{this.props.task}</div>
            <button onClick={this.edit} className="task__btn-edit"></button>
            <button onClick={this.remove} className="task__btn-remove"></button>
         </div>
      );
   }


   render() {
      if(this.state.edit){
         return this.editForm();
      }
      else{
         return this.Form();
      }

   }

}

ReactDOM.render(
   <div className='wrapper'>
      <TodoList />
   </div>
   , // render to renderObj
   document.getElementById('root')
);

.todo
   .task
      display: grid
      border: 1px solid #f5f5f5
      padding: 10px
      grid-template-columns: 10fr 30px 30px
      grid-gap: 10px
      align-items: center
      
      &.edited
         grid-template-columns: 10fr 30px
      
      [class*='task__btn']
         cursor: pointer
         height: 30px
         width: 30px
         background-size: 16px
         background-repeat: no-repeat
         background-position: center
         
      &__btn
         &-edit
            background-image: url('https://img.icons8.com/material/24/000000/pencil.png')
         &-remove
            background-image: url('https://img.icons8.com/material/24/000000/trash.png')
         &-save
            background-image: url('https://img.icons8.com/material/24/000000/save.png')
            
      &__field
         resize: none
         border-radius: 3px
         padding: 5px

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.0/umd/react-dom.production.min.js"></script>
<div id='root'/>

如何修复其他类中的方法

1 个答案: