Question

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

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>
    )
  }
}

Answer 1

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

切换不起作用，没有错误

1 个答案: