React - Can not read property 'call' of undefined

Question

Все, кажется, работает с этим маленьким приложением, кроме добавления новой заметки. Кнопка расположена на компоненте Board.

Я знаю, что эта проблема обычно вызвана неправильной привязкой «этого». Я не уверен, что это проблема, или если мне не хватает чего-то другого. Благодаря

Демо: 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. Если вы добавите прагму // noprotect в начало своего кода, вы увидите, что она работает.

Answer 2

Binding это то, что хлопот с классами ES6 в среагировать. Один из способов - связать их в вашем конструкторе так;

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

Другое - использовать babel.configure ({stage: 0}) и функции стрелок.

nextid =() => {}