Question

除了添加新笔记之外，一切似乎都适用于这个小应用程序。按钮位于Board组件上。

我知道这个问题通常是由于没有约束＆＃39;这个＆＃39;正常。我不确定这里的问题是否存在，或者我是否遗漏了其他问题。感谢

演示：http://jsbin.com/pewahi/edit?js,output

/* jshint asi:true */

class Note extends React.Component {
  constructor(props) {
    super(props)
    this.state = { editing: props.editing }
  }

  render() {
    if (this.state.editing) {
      return this.renderForm()
    } else {
      return this.renderDisplay()
    }
  }

  edit() {
    this.setState({editing: true})
  }

  save() {
    this.props.changeHandler(this.refs.newText.getDOMNode().value, this.props.index)
    this.setState({editing: false})
  }

  remove() {
    this.props.removeHandler(this.props.index)
  }

  renderDisplay() {
     return (      
      <div className="note">
        <p>{this.props.children}</p>
        <span>
          <button className="btn btn-sm glyphicon glyphicon-pencil" onClick={this.edit.bind(this)}></button>
          <button className="btn btn-sm glyphicon glyphicon-trash" onClick={this.remove.bind(this)}></button>
        </span>
      </div>   
    )    
  }

  renderForm() {
    return (
      <div className="note">
        <textarea ref="newText" defaultValue={this.props.children} className="form-control"></textarea>
        <button onClick={this.save.bind(this)} className="btn btn-success btn-sm"><span className="glyphicon glyphicon-floppy-disk"></span> Save</button>
      </div>
    )
  }
}

Note.propTypes = { 
  editing: React.PropTypes.bool,
  onChange: React.PropTypes.func,
  onRemove: React.PropTypes.func
}

Note.defaultProps = { editing: false }

class Board extends React.Component {
  constructor(props) {
    super(props)
    this.state = { 
      notes: [{note: 'hi', id: this.nextId()}]
    }
  }

  update(newText, i) {
    var arr = this.state.notes
    arr[i].note = newText
    this.setState({notes: arr})
  }

  remove(i) {
    var arr = this.state.notes
    arr.splice(i, 1)
    this.setState({notes: arr})
  }

  addNote(text) {
    var arr = this.state.notes
    arr.push({
      id: this.nextId(),
      note: text
    })
    console.log(arr)
    this.setState({notes: arr})
  }

  nextId() {
    this.uniqueId = this.uniqueId || 0
    return ++this.uniqueId
  }


  eachNote(note, i) {
    return (
      <Note key={note.id}
            index={i}
            changeHandler={this.update.bind(this)}
            removeHandler={this.remove.bind(this)}

        >{note.note}
      </Note>
    )
  }

  render() {
    return (
      <div className="board">
        {this.state.notes.map(this.eachNote, this)}
        <button onClick={this.addNote.bind(this, "new note")} className="btn btn-success btn-sm glyphicon glyphicon-plus"></button>
      </div>
    )
  }
}

React.render(
  <Board />,
  document.getElementById('message-board')
)

Answer 1

你的代码很好。这可能是JSBin的一个错误，以及它如何处理Babel的转换。如果您将编译语final添加到代码顶部，您会看到它有效。

Answer 2

我遇到了同样的错误。我使用的是基本组件，但我注意到已经删除了基本组件的<svg width="800px" height="400px"></svg>方法。当我在子组件中调用componentDidMount时，出现了错误。因此，我删除了超级通话并解决了问题。

Answer 3

对于es6类的反应，绑定这是一件麻烦事。一种方法是在构造函数中绑定它们，就像这样;

    constructor(props) {
        super(props)
        this.nextid = this.nextid.bind(this)
        this.state = { 
            notes: [{note: 'hi', id: this.nextId()}]
        }
    }

另一种方法是使用babel.configure（{stage：0}）和箭头函数。

nextid = () => {}

React - 无法读取属性＆＃39; call＆＃39;未定义的

3 个答案: