javascript - React - 无法读取未定义的属性 'call'

Question

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

我知道这个问题通常是由于没有正确绑定(bind)'this'的值引起的。我不确定这是这里的问题还是我遗漏了其他东西。谢谢

演示: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 的转译。如果您将 pragma //noprotect 添加到代码的顶部，您将看到它有效。