回答編集履歴

コードの追加

2020/03/30 22:45

投稿

スコア0

answer CHANGED Viewed

@@ -1,1 +1,60 @@
-Organisms側から関数などを渡す。
+Organisms側から関数などを渡す。(最適かどうかは別として、最低限の動作はする)
+```JavaScript
+import React, { Component } from 'react';
+import Counter from './atoms/Counter';
+import Btn from './atoms/Btn';
+export default class Organisms extends Component {
+    constructor(props) {
+        super(props);
+        this.handleClick = this.handleClick.bind(this);
+        this.state = {
+            count: 0,
+        }
+    }
+    handleClick() {
+        this.setState({
+            count: this.state.count + 1,
+        })
+    }
+    render()
+    {
+        return(
+            <>
+                <Counter count={this.state.count} onClick={this.handleClick}/>
+                <Btn text="Click!" onClick={this.handleClick}/>
+            </>
+        );
+    }
+}
+```
+```JavaScript
+import React, { Component } from 'react';
+const Btn = (props) => {
+    return(
+        <button onClick={props.onClick}>{props.text}</button>
+    );
+}
+export default Btn;
+```
+```JavaScript
+import React, { Component } from 'react';
+const Counter = (props) => {
+    return(
+        <h3>{props.count}</h3>
+    );
+}
+export default Counter;
+```