切换不起作用,没有错误

时间:2017-01-09 13:05:20

标签: javascript reactjs

我的目的是在按下编辑时显示输入字段但是使用下面的代码它不起作用,我无法找出问题所在,控制台中没有错误。

http://jsbin.com/yezediloke/1/edit?js,console,output

class TodoItem extends React.Component {
  constructor(){
    super()
    this.isEditing = false;
    this.onClickEdit = this.onClickEdit.bind(this);
  }
  onClickEdit(){
    this.setState({isEditing: !this.isEditing});
  }
  render(){
    return(

      <li>
        <span>{this.props.item}</span>
      {this.isEditing ? '<span><input type="text" /></span>' :''}
      &nbsp;&nbsp;<button onClick={this.onClickEdit}>Edit</button>
      <button>Save</button>
      </li>
    )
  }
}

1 个答案:

答案 0 :(得分:2)

4个问题:

1:您没有在构造函数中设置初始状态:

  constructor(){
    super()
    this.isEditing = false;
    this.onClickEdit = this.onClickEdit.bind(this);
    this.state = { isEditing: false };
  }

2和3:跨度不需要''this.isEditing应该是this.state.isEditing

 render(){
    return(

      <li>
        <span>{this.props.item}</span>
/*Look here>>>*/ {this.state.isEditing ? <span><input type="text" /></span> :''}
      &nbsp;&nbsp;<button onClick={this.onClickEdit}>Edit</button>
      <button>Save</button>
      </li>
    )
  }

4:this.isEditing应该是onClickEdit

中的this.state.isEditing
onClickEdit(){
    this.setState({isEditing: !this.state.isEditing});
  }

这有效:http://jsbin.com/ganimopalo/1/edit?js,console,output