\u67f4\u54b2\u5148\u751f\u3067\u3059\u3002<\/p>\n \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u308b<\/p>\n <\/p>\n \u672c\u306e\u30b5\u30f3\u30d7\u30eb\u3060\u3051\u3069\uff08GitHub\u306e\u65b9\u306f\u898b\u3066\u306a\u3044\u301c\uff09<\/p>\n import { Button, Card, Statistic } from ‘semantic-ui-react’;<\/p>\n \u3053\u308c\u3060\u3051\u3058\u3083\u3001\u753b\u9762\u304c\u88c5\u98fe\u3055\u308c\u306a\u304f\u3066<\/p>\n \u3053\u308c\u3082\u5fc5\u8981\u3060\u3063\u305f\u3002\u3053\u308c\u5165\u308c\u305f\u3089\u88c5\u98fe\u3055\u308c\u305f\u3002<\/p>\n import\u306f<\/p>\n \u3053\u3046\u3002<\/p>\n <\/p>\n \u52d5\u7684\u306b\u5909\u66f4\u3057\u305f\u3044\u5834\u5408<\/p>\n \u2191 Props\u306f\u7701\u7565\u3057\u3066\u3044\u308b\u3002<\/p>\n <\/p>\n \u4e0b\u306e\u968e\u5c64\u304b\u3089\u4e0a\u306e\u968e\u5c64\u306b\u30c7\u30fc\u30bf\u306e\u5909\u66f4\u3092\u53cd\u6620\u3059\u308b\u3053\u3068\u306f\u3067\u304d\u306a\u3044\u3051\u3069\u3001\u89aa\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u304c\u81ea\u8eab\u306e\u72b6\u614b\u3092\u5909\u66f4\u3059\u308b\u95a2\u6570\u3092\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306b\u6e21\u3057\u3066\u5909\u66f4\u3059\u308b\u3068\u3044\u3046\u3084\u308a\u65b9\u304c\u3042\u308b<\/span><\/strong><\/p>\n \u300c() => this.increment() \u300dLacalState\u306e\u5024\u3092\uff11\u52a0\u7b97\u3059\u308b\u95a2\u6570\u3092\u3001\u5b50\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306bProps\u3067\u6e21\u3057\u3066\u3001\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u5185\u90e8\u306eClick\u30a4\u30d9\u30f3\u30c8\u306b\u4ed5\u8fbc\u3093\u3067\u4e0a\u306e\u968e\u5c64\u306e\u95a2\u6570\u3092\u767a\u706b\u3055\u305b\u308b\u3063\u3066\u3053\u3068\u304c\u3067\u304d\u308b\u3002<\/p>\n <\/p>\n \u2193<\/p>\n this.setState \u306a\u3093\u3066\u306a\u3044\u3088\u3068\u8a00\u308f\u308c\u308b\u3002<\/p>\n \u2193 \u95a2\u6570\u5b9a\u7fa9\u3067\u66f8\u3044\u3066\u3044\u308b\u304b\u3089 this.setState \u306a\u3044\u3063\u3066\u8a00\u308f\u308c\u308b\uff08\u95a2\u6570\u3067\u304b\u304f\u3068this\u306f\u5b9f\u884c\u6642\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u306a\u308b\u304b\u3089\uff09<\/p>\n \u2193 \u00a0\u30a2\u30ed\u30fc\u95a2\u6570\u306b\u66f8\u304d\u63db\u3048\u308b<\/p>\n \u516c\u5f0f\u30da\u30fc\u30b8<\/a><\/p>\n \u3061\u3087\u3063\u3068\u308f\u304b\u308a\u3084\u3059\u3044\u304b\u3082\uff08\u53e4\u3044\u3051\u3069\uff09<\/a><\/p>\n \u2193<\/p>\n \u30e1\u30bd\u30c3\u30c8\u5185\u90e8\u3067\u64cd\u4f5c\u3059\u308b\u3068\u304d\u306b\u3001\u30a4\u30d9\u30f3\u30c8\u30cf\u30f3\u30c9\u30e9\u306e\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u5f15\u6570\u3068\u3057\u3066\u53d7\u3051\u53d6\u308c\u308b\u3002<\/p>\n \u30a8\u30e9\u30fc\u306b\u306a\u3063\u305f<\/p>\n![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/b58a45d3559cc75109305d27be6d5ea8-300x300.png\")
<\/a><\/p>\n$ npx create-react-app counter-test --typescript<\/pre>\n
Local State<\/h2>\n
\n
$ yarn add semantic-ui-css<\/pre>\n
![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/55d395f5de7665ec7b088790324acd5f-300x173.png\")
<\/a><\/p>\nimport { Button, Card, Statistic } from 'semantic-ui-react';\r\nimport 'semantic-ui-css\/semantic.min.css';\r\n<\/pre>\nthis.State<\/h6>\n
constructor(props: {}) {\r\n super(props);\r\n \/\/ this.state \u3053\u3053\u5927\u4e8b\r\n \/\/ \u521d\u671f\u5316\u3057\u3066\u3044\u308b\r\n this.state = { count:0 };\r\n }<\/pre>\n<\/h6>\n
setState()<\/h6>\n
\n
increment() {\r\n \/\/ this.state\u306b\u5024\u3092\u5165\u308c\u308b\u3053\u3068\u306f\u3067\u304d\u306a\u3044\r\n \/\/ this.state\u3067\u53c2\u7167\u306f\u3067\u304d\u308b\r\n this.setState(prevState => ({\r\n count: prevState.count + 1,\r\n }));\r\n }<\/pre>\n\u89aa\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u4e2d\u8eab\u3092\u5909\u3048\u305f\u3044\u3068\u304d<\/h6>\n
\n
<Button color=\"blue\" onClick={() => this.increment()}> \r\n +1\r\n <\/Button>\r\n<\/pre>\nthis\u6319\u52d5\u306e\u78ba\u8a8d<\/h6>\n
<Button color=\"blue\" onClick={() => this.increment()}><\/pre>\n <Button color=\"blue\" onClick={this.increment}>\r\n<\/pre>\n![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/dc620d1d8bb9bea8527f3c6391bd41e2.png\")
<\/a><\/p>\n increment() {\r\n this.setState(prevState => ({\r\n count: prevState.count + 1,\r\n }));\r\n }<\/pre>\n increment = () => {\r\n this.setState(prevState => ({\r\n count: prevState.count + 1,\r\n }));\r\n }<\/pre>\n<\/h6>\n
SyntheticEvent\u578b\u3067\u5b9a\u7fa9\u3059\u308b<\/h6>\n
decrement() {\r\n this.setState(prevState => ({\r\n count: prevState.count - 1,\r\n }));\r\n }<\/pre>\n decrement = (e: SyntheticEvent) => {\r\n e.preventDefault();\r\n this.setState(prevState => ({\r\n count: prevState.count - 1,\r\n }));\r\n }<\/pre>\n![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/3d6e42f371b58f9933ec946712e4067b.png\")
<\/a><\/p>\n
![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/3bead599722f0513816128074fae1f28.png\")
<\/a><\/p>\n![\"\"](\"https:\/\/greentown.tokyo\/wp-content\/uploads\/2019\/05\/11b6e44110ab2c6d27fb7436a9534675-e1557118058947-300x170.png\")
<\/a><\/p>\n