执行函数

时间:2016-10-19 16:26:23

标签: javascript reactjs

尝试通过编辑按钮编辑输入的文本。 “编辑”按钮调用triggerEdit函数,该函数读取enableEdit属性。我的代码是这样的:

    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) {
  	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不是函数

1 个答案:

答案 0 :(得分:1)

根据代码的编写方式,它应该是:this.enableEdit(i) enableEdit是组件上的一个方法,而不是你传递给它的道具