反應 - 無法讀取未定義的屬性「呼叫」

Question

除了添加新註釋之外，似乎一切都適用於此小型應用程序。按鈕位於電路板組件上。

我知道這個問題通常是由於沒有正確綁定'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的轉譯。如果將編譯指示// noprotect添加到代碼的頂部，則會看到它的工作原理。

Answer 2

綁定，這是在反應器ES6類的東西是件麻煩事。一種方法是像這樣在你的構造函數中綁定它們;

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

另一個是使用babel.configure（{stage：0}）和箭頭函數。

nextid =() => {}