反應的組分之間的setState ES6

Question

我有，我想從一個子組件更新父組件的狀態如下一個非常簡單的應用：

import React from '../../../../../../../dependencies/node_modules/react'; 
import ReactDOM from '../../../../../../../dependencies/node_modules/react-dom'; 

class CalendarMain extends React.Component { 
    constructor() { 
     super(); 
    } 

    handleClick() { 
     this.props.handleStateClick("State Changed"); 
    } 

    render() { 
     return ( 
      <div> 
       <div className="calendar"> 
        {this.props.checkIn} 
        <button onClick={ this.handleClick.bind(this) }>Click Me</button> 
       </div> 
      </div> 
     ) 
    } 
} 

class CalendarApp extends React.Component { 

    constructor() { 
     super(); 

     this.state = { 
      checkIn: "Check-in", 
      checkOut: "Check-out", 
      dateSelected: false 
     }; 
    } 

    handleStateClick(newState) { 
     this.setState({ 
      checkIn: newState 
     }); 
    } 

    render() { 

     return (
      <div> 
       <CalendarMain 
        checkIn = { this.state.checkIn } 
        handleStateClick = { this.handleStateClick.bind(this) } 
       /> 
      </div> 
     ); 
    } 
} 

我收到的錯誤是this.setState is not a function可以和我沒有解決原因。任何幫助將非常感激！

Answer 1

this未在ES6樣式語法中自動綁定。

或者：

1. 綁定在構造函數中，像這樣：func =() => {};

這裏更多：https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding

Answer 2

使用this.func = this.func.bind(this)

有問題的功能，像這樣使用方向函數的語法() => lambda提供詞法範圍並在方法內綁定正確的值：

handleStateClick =() => { 
    this.setState({ 
    checkIn: newState 
    }); 
}