this.props.enableEdit不是執行功能時的功能錯誤

Question

嘗試通過編輯按鈕編輯輸入的文本。編輯按鈕調用讀取enableEdit屬性的triggerEdit函數。我的代碼是這樣的：

class App extends React.Component { 
 

 
    
 

 
     constructor(){ 
 
    super(); 
 
    this.state={ 
 
    todo:[] 
 
    }; 
 
}; 
 

 
entertodo(keypress){ 
 
    var Todo=this.refs.inputodo.value; 
 
    if(keypress.charCode == 13) 
 

 
    { 
 
    this.setState({ 
 
     todo: this.state.todo.concat({Value:Todo, checked:false}), 
 
     editing:false 
 
    }); 
 
    this.refs.inputodo.value=null; 
 
    }; 
 
}; 
 
todo(todo,i){ 
 
    return (
 
    <li className={todo.checked===true? 'line':'newtodo'}> 
 
     <div > 
 
     <input type="checkbox" className="option-input checkbox" checked={todo.checked} /> 
 
     <div key={todo.id} className="item"> 
 
      {todo.Value} 
 
      <span className="destroy" onClick={this.remove.bind(this, i)}>X</span> 
 
      <button onClick={this.triggerEdit.bind(this,i)}type='button'>edit</button> 
 
     </div> 
 
     </div> 
 
    </li> 
 
); 
 
}; 
 

 
remove(i){ 
 
    this.state.todo.splice(i,1) 
 
    this.setState({todo:this.state.todo}) 
 
}; 
 
todoCompleted(i){ 
 
    var todo=this.state.todo; 
 
    todo[i].checked =todo[i].checked? false:true; 
 
    this.setState({ 
 
     todo:this.state.todo 
 
    }); 
 

 
}; 
 
allCompleted=()=>{ 
 
    var todo = this.state.todo; 
 
    var _this = this 
 
    todo.forEach(function(item) { 
 
    item.className = _this.state.finished ? "newtodo" : "line" 
 
    item.checked = !_this.state.finished 
 
    }) 
 
    this.setState({todo: todo, finished: !this.state.finished}) 
 
}; 
 

 
enableEdit(i){ 
 
    var todo= this.state.todo; 
 
    var edittodo=todo[i]; 
 
}; 
 
triggerEdit(i) { 
 
    \t this.props.enableEdit(i) 
 
    }; 
 
    render() { 
 
    return (
 
     <div> 
 
     <h1 id='heading'>todos</h1> 
 
     <div className="lines"></div> 
 
     <div> 
 
      <input type="text" ref= "inputodo" onKeyPress={this.entertodo.bind(this)}className="inputodo"placeholder='todos'/> 
 
      <span onClick={this.allCompleted}id="all">^</span> 
 
     </div> 
 
     <div className="mainapp"> 
 
      <ul className="decor"> 
 
      {this.state.todo.map(this.todo.bind(this))} 
 
      </ul> 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App/>,document.getElementById('app'));

.line { 
 
    text-decoration: line-through; 
 
    color: red; 
 
} 
 
.newtodo{ 
 
    text-decoration: none; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script> 
 
<div id="app"></div>

我嘗試了一些方法，但我得到的錯誤是this.props.enableEdit不是一個函數

Answer 1

你的代碼是怎麼寫它應該是：this.enableEdit(i) enableEdit是組件上的一種方法，而不是您傳遞給它的道具