Created
August 7, 2020 11:30
-
-
Save kuredev/87d62034fbc14fe818a4cb7a53afb0d1 to your computer and use it in GitHub Desktop.
React Component（クラス）でStateを更新するサンプルコード
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Fibonacci</title> | |
| <script src="https://unpkg.com/react@16/umd/react.development.js"></script> | |
| <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> | |
| <script src="https://unpkg.com/[email protected]/babel.js"></script> | |
| </head> | |
| <body> | |
| <div id="root">wait...</div> | |
| <script type="text/babel"> | |
| // State をクリックで更新する | |
| class Fibonacci extends React.Component { | |
| constructor(props){ | |
| super(props); | |
| this.state = { | |
| msg: "Fibonacci" | |
| }; | |
| this.calcNext = this.calcNext.bind(this); | |
| } | |
| // これでも動く | |
| // calcNext(e){ | |
| // this.setState({ | |
| // msg: "hoge" | |
| // }); | |
| // } | |
| //これでも動く | |
| // updatedMsg = function(){ | |
| // return { msg: "hoge" } | |
| // } | |
| // calcNext(e){ | |
| // this.setState( | |
| // this.updatedMsg | |
| // ) | |
| // } | |
| // 動く （アロー関数Version） | |
| // calcNext(e){ | |
| // this.setState( | |
| // () => { | |
| // return { msg: "hoge" } | |
| // } | |
| // ) | |
| // } | |
| // 動く （アロー関数＋引数にstateを取って前のやつを更新していく） | |
| calcNext(e){ | |
| this.setState( | |
| (state) => { | |
| return { msg: state.msg + "Fibonacci" } | |
| } | |
| ) | |
| } | |
| render(){ | |
| return <div> | |
| <p>{this.state.msg}</p> | |
| <button onClick={this.calcNext}>Calc</button> | |
| </div>; | |
| } | |
| } | |
| ReactDOM.render(<Fibonacci />, document.getElementById('root')); | |
| </script> | |
| </body> | |
| </html> |
参考サイト
【JavaScript】アロー関数とか即時関数とかの書き方メモ https://gist.github.com/kuredev/86108045b1ca51f26ee5479ee4d739ab
React の setState() の引数が関数の場合とオブジェクトの場合の違いについて整理する - Qiita https://qiita.com/im36-123/items/857c96ff60024c0d8a1c
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
動かすと↓な感じ。