[Day26] React - 设定属性(style属性 & 事件属性)

设定style属性

上一篇有提到我们可以在React.createElement的第二个参数设定React元素属性，而style样式也是属性的一种，只是它是一个个key + value组合成的物件，以下为用React元素的方式增加style样式:

• 要注意的是属性名称若有两个以上的单字，要用Camel-case (驼峰式命名)。

Camel-case 驼峰式命名:
第一个单字以小写字母开始；第二个单字的首字母大写，如： firstName、lastName、myFunction。

const e = React.createElement("input",{
	syle:{
		color: "red",
		border:  "1px solid green",
		borderRadius: "4px"  //若有两个以上的单字要用Camel-case
	};
});

设定事件属性

• 宣告函式

<div id='root'></div>

function myFunction() {
  alert("Hello world!");
}

let e = React.createElement("input", {
  onInput: myFunction   //直接给function名称，不需加小括号()
});

let myRoot = document.getElementById("root");
ReactDOM.render(e, myRoot);

• 匿名函式

<div id='root'></div>

let e2 = React.createElement("input",{
  onInput: () => {
    alert("Hello world!")
  }
});

let myRoot = document.getElementById("root");
ReactDOM.render(e2, myRoot);