使用ES6和ES7的ReactJs中的狀態

在許多示例中，我已經看到要在反應組件內部管理狀態，您必須使用getInitialState（如本例中的示例）。使用ES6和ES7的ReactJs中的狀態

var LikeButton = React.createClass({ 
    getInitialState: function() { 
    return {liked: false}; 
    }, 
    handleClick: function(event) { 
    this.setState({liked: !this.state.liked}); 
    }, 
    render: function() { 
    var text = this.state.liked ? 'like' : 'haven\'t liked'; 
    return (
     <p onClick={this.handleClick}> 
     You {text} this. Click to toggle. 
     </p> 
    ); 
    } 
});

但是在使用getInitalState（）的ES6語法中不再有效。那麼如何使用ES6語法來管理反應組件中的狀態？

一個例子是

// Future Version 
export class Counter extends React.Component { 
    static propTypes = { initialCount: React.PropTypes.number }; 
    static defaultProps = { initialCount: 0 }; 
    state = { count: this.props.initialCount }; 
    tick() { 
    this.setState({ count: this.state.count + 1 }); 
    } 
    render() { 
    return (
     <div onClick={this.tick.bind(this)}> 
     Clicks: {this.state.count} 
     </div> 
    ); 
    } 
}

感謝

來源

2016-02-26 Tony Jen

，該陣營團隊決定初始化狀態的更地道的方式是簡單地將其存儲在構造函數中的一個實例變量的設置。這意味着您可以通過將其返回值重構爲您的類的構造函數中的this.state實例變量來重構您的getInitialState方法。

import React, { Component } from 'react'; 

class LikeButton extends Component { 
    constructor() { 
    super(); 
    this.state = { liked : false }; 
    this.handleClick = this.handleClick.bind(this) 
    } 

    handleClick() { 
    this.setState({ 
     liked : !this.state.liked 
    }); 
    } 

    render() { 
    const text = this.state.liked ? 'like' : 'haven\'t liked'; 

    return (
     <p onClick={this.handleClick}>{`You ${text} this. Click to toggle.`}</p> 
    ); 
    } 
}

注：必須結合你的方法在ES6 +組件實例

可以使用Property initializers功能

import React, { Component } from 'react'; 

class LikeButton extends Component { 
    state = { 
    liked : false 
    } 

    render() { 
    const text = this.state.liked ? 'like' : 'haven\'t liked'; 
    const handleClick =()=>{ 
     this.setState({ 
     liked : !this.state.liked 
     }); 
    } 

    return (
     <p onClick={this.handleClick}>{`You ${text} this. Click to toggle.`}</p> 
    ); 
    } 
}

注：這是一個Stage 0建議。

注：我放棄了constructor這樣定義嵌套函數內部render

Refrences：React official docs/Article

來源

2016-02-26 21:56:18

十分感謝，我把handeClick功能閱讀器之外，並會得到一個空值錯誤。 –

雖然這是在每個RENDER上創建一個新的HandleClick函數不是很好 – AndrewMcLagan

-1

我認爲這個問題可能已經與<p>標籤內的文本。嘗試對大小此代碼：

const LikeButton = React.createClass({ 
    getInitialState() { 
     return { 
      liked : false 
     }; 
    }, 

    handleClick() { 
     this.setState({ 
      liked : !this.state.liked 
     }); 
    }, 

    render() { 
     const text = this.state.liked ? 'like' : 'haven\'t liked'; 

     return (
      <p onClick={this.handleClick}>{`You ${text} this. Click to toggle.`}</p> 
     ); 
    } 
});

來源

2016-02-26 21:02:24

在ES6您在構造函數初始化狀態。即：

constructor(props) { 
    super(props) 
    this.state = {} //or whatever 
}

您可以在ES6更多的official docs

來源

2016-02-26 21:42:48

使用ES6和ES7的ReactJs中的狀態

回答

相關問題