回答編集履歴
3
引数が必要か
answer
CHANGED
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
|
|
20
20
|
```js
|
|
21
21
|
const stylecolor = "black"
|
|
22
|
-
const ev = false
|
|
22
|
+
const ev = false //判定用フラグ
|
|
23
|
+
const anycolor = '' //取得した任意のカラー
|
|
23
24
|
const [color,setColor] = useState("")
|
|
24
25
|
const handle = (e)=>{
|
|
25
26
|
let ev = e.target.value
|
|
@@ -32,7 +33,7 @@
|
|
|
32
33
|
}
|
|
33
34
|
return (
|
|
34
35
|
<div
|
|
35
|
-
onClick={handle}
|
|
36
|
+
onClick={handle(anycolor)}
|
|
36
37
|
style={{background-color: anycolor}}
|
|
37
38
|
></div>
|
|
38
39
|
)
|
2
class ではなくて style
answer
CHANGED
|
@@ -2,14 +2,14 @@
|
|
|
2
2
|
|
|
3
3
|
```js
|
|
4
4
|
const hogehoge = "black"
|
|
5
|
-
<div
|
|
5
|
+
<div style={{background-color: hogehoge}}>
|
|
6
6
|
```
|
|
7
7
|
|
|
8
8
|
この変数hogehogeに値を変えていくだけです。要はオブジェクトリテラルの中にスタイル制御用のブラケットが入っている状態です。
|
|
9
9
|
|
|
10
10
|
```js
|
|
11
11
|
const hogehoge = "black"
|
|
12
|
-
<div
|
|
12
|
+
<div style={
|
|
13
13
|
{background-color: hogehoge}
|
|
14
14
|
}>
|
|
15
15
|
```
|
1
レイアウトが崩れてた
answer
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
あとはこの要素に対し、clickイベントなどで値を差し替えるだけです
|
|
18
18
|
|
|
19
19
|
|
|
20
|
-
``js
|
|
20
|
+
```js
|
|
21
21
|
const stylecolor = "black"
|
|
22
22
|
const ev = false
|
|
23
23
|
const [color,setColor] = useState("")
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
|
|
42
42
|
CSS変数はこの応用です。さっきまでのやり方だとプロパティの値だけを制御する必要がありましたが、CSS変数を用いることでプロパティごと設定が可能になります。
|
|
43
43
|
|
|
44
|
-
```
|
|
44
|
+
```js
|
|
45
45
|
const = style{ "--my-css-var": 10 } as React.CSSProperties;
|
|
46
46
|
render(){
|
|
47
47
|
return <div style={style}></div>
|