react 樣式 事件

react元件

新增樣式和事件
樣式:(1)元件內class屬性變成classname 
其中：寫法為:classname='xx'
動態新增多個類:
classname=
classname=
classname= $`}
classname= 類名`} 動態新增類名
classname=
classname= 必須新增小括號,否則會將+號前面一起作為表示式結果,永真
(2)元件內style屬性寫法變成:style=} 
其中 1、鍵值要加}括號 
2、不同鍵值對按,號分割
3、帶有-的屬性,變成-後首字母大寫,如backgroundcolor
4、style屬性接收的是物件,所以也可寫成,var obj=; style=
事件:(1)事件名變為on後每個單詞首字母大寫
如onclick onmousemove
(2)事件函式內的this代表這個元件
用法:先在元件內標籤新增 
事件名=
若是在元件外定義的函式
事件名=
然後在元件內按照物件形式補全函式
函式名:function()
傳引數事件名=}
事件名=

"utf-8"
>
<
/title>
"js/libs/browser.min.js"
>
<
/script>
"js/libs/react.js"
>
<
/script>
"js/libs/react-dom.js"
>
<
/script>
"js/libs/jquery-3.4.1.js"
>
<
/script>
.d1<
/style>
<
/head>
="big"
>
<
/div>
="big2"
>
<
/div>
='big3'
>
<
/div>
"text/babel"
>
var arr=[1
,2,3
,4,5
];var arr1=
[p1<
/p>
,p2<
/p>
,p3<
/p>];
var obj=[,
]var world=react.
createclass
(<
/a>
<
/li>
}>我的世界<
/span>
<
/ul>
<
/div>)}
})var thing=react.
createclass
( onmousemove=
>點我<
/button>
<
/div>)}
, click:
function()
, move:
function()
})reactdom.
render
(>
,document.
queryselector
(".big3"))
<
/script>
<
/body>
<
/html>

react事件處理及動態樣式新增

多資料的事件繫結，迴圈資料來進行繫結。如下方式就是迴圈繫結事件的基本 this.state.lists.map function value,index,array bind this 這裡是一塊事件繫結的例子，可以點選按鈕，點選的那個按鈕來實現選中的狀態，並且可獲取點選按鈕的值 var ask r...

React 樣式處理

可以通過直接設定classname prop來確定類名以確定樣式，或者通過style prop來設定行內樣式。需要注意的是，style prop需要是乙個物件。栗子 const style 注意如下寫法，會自動轉換為 webkit transition webkittransition all ms...

react 事件處理

1.所有的事件以駝峰式命名如onclick 2.this作用域的問題，直接使用箭頭函式可以將該類的例項物件傳遞過去 若是呼叫的元件方法，需要使用this.handleclick this.handleclick.band this 這句話會建立乙個新的函式給handleclick，並把this當做引...