1.點擊事件
<script type="text/babel">
function fn() {
alert(12);
}
// 事件的值要是一個函數
ReactDOM.render((
<div>
<input type="button"
onClick={fn} value="你來點我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
2.點擊事件傳值
<script type="text/babel">
function fn(num) {
return function () {
alert(num);
}
}
ReactDOM.render((
<div>
{/*點擊事件綁定的值是fn函數的運行結果，*/}
<input type="button"
onClick={fn(23)} value="你來點我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
3.事件 4.事件
例1：
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button"
onClick={function () {
alert(78)
}} value="你來點我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
例2：
<script type="text/babel">
ReactDOM.render((
<div>
<input type="button"
onClick={()=>{
alert(87)
}} value="你來點我呀！"/>
</div>
),document.querySelector("#myApp"));
</script>
5.事件bind
function fn(a,b,e) {
console.log(a,b,e.target.value,this)
//1 2 "你快來打我呀！" undefined
}
const obj = {
userName:"laoLi",
age:12
};
ReactDOM.render((
<div>
<input type="button"
onClick={fn.bind(obj,1,2)} value="你快來打我呀！" />
</div>
),document.querySelector("#myApp"))
6.事件 顯示與隱藏 7.顯示隱藏優化
let isShow = true;
render();
function changeIsShow(){
isShow = !isShow
render();
}
function render() {
ReactDOM.render((
<div>
<input type="button" onClick={changeIsShow} value="顯示與隱藏"/>
<div style={{
width:"100px",
height:"100px",
background:"red",
display:isShow?"block":"none"
}}></div>
</div>
),document.querySelector("#myApp"));
}
8.
非狀態組件
定義：通過函數來定義，該函數必須要有返回值。返回的內容即是組件的內容。
//函數名即是組件名
//函數必須要有返回值，如果不想返回數據 Return null
使用：將你的函數作為標簽來使用
例1：
function Fn() {
return null;
// return (
// <div>lala</div>
// )
}
ReactDOM.render((
<div>
一起來學習組件吧
<Fn></Fn>
</div>
),document.querySelector("#myApp"));
例2：
語法：建議返回值用括號包裹
有且只能有一個根元素。
function MyCom() {
return (
<div>
大家好，我叫MYCOM
</div>
)
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
9.無狀態組件傳值
// 組件的屬性，即是放在定義組件函數接收的參數對象當中
// 子組件接收的屬性是不允許直接被修改的。
function MyCom(props) {
console.log(props);
function changeAge(){
props.age = 1234;
}
return (
<div>
大家好，我叫MYCOM
<input type="button" value="修改屬性" onClick={changeAge}/>
</div>
)
}
let num = 9;
ReactDOM.render((
<div>
<MyCom
userName = "xixi" age="12" num={num}></MyCom>
</div>
),document.querySelector("#myApp"));
10.非狀態組件 修改父元素屬性
// 接收屬性
function MyCom(props) {
return (
<div>
<input type="button" value="修改userName" onClick={()=>{changeUserName("three");}} />
我是無狀態組件{props.userName}
</div>
)
}
// 使用組件MyCom,並傳遞了一個屬性名字叫userName 值為one
let userName = "one";
function changeUserName(str) {
userName = str;
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
}
ReactDOM.render(<MyCom userName={userName}/>,document.querySelector("#myApp"));
11.組件嵌套
function Two() {
return (
<div>two</div>
)
}
function One() {
return (
<div>
one
<Two></Two>
</div>
)
}
ReactDOM.render((
<div>
<One></One>
</div>
),document.querySelector("#myApp"));
12.
狀態組件
// 狀態組件：通過class來定義的組件。
React.Component.
// class的名字即是組件名
class My extends React.Component{
// 呈現，它必須要有一個返回值，返回的內容好是組件的內容
render(){
return (
<div>
我是一個狀態組件
</div>
)
}
}
ReactDOM.render((
<div>
<My></My>
</div>
),document.querySelector("#myApp"));
13.狀態組件的傳值1
組件傳值：
傳遞的屬性，其實是放到你的父級React.Component的props對象下
傳遞屬性： <My userName="nihao" age="12"></My>
接收 ：this.props.userName this.props.age
class My extends React.Component{
constructor(props){
super(props);
console.log(this.props);
}
render(){
console.log("render",
this.props
);
return (
<div>
lala{this.props.userName}
</div>
)
}
}
ReactDOM.render((
<div>
<My userName="nihao" age="12"></My>
</div>
),document.querySelector("#myApp"))
14.狀態組件的傳值2
class Tag extends React.Component{
render(){
return (
<div>
<input type="button" onClick={
this.props.changeNum} value={
this.props.num}/>
</div>
)
}
}
class MyCom extends React.Component{
constructor(){
super();
this.num = 1;
console.log("constructor")
}
changeNum(){
console.log(11111,this);
this.num += 1;
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
}
render(){
console.log("render")
return (
<div>
Mycom
<Tag num={this.num} changeNum = {this.changeNum.bind(this)}></Tag>
</div>
)
}
}
ReactDOM.render((
<div>
<MyCom></MyCom>
</div>
),document.querySelector("#myApp"));
15.狀態組件的傳值3
class Wrap extends React.Component{
constructor(){
super();
this.isShow = true;
console.log("costructor");
}
changeIsShow(){
this.isShow = !this.isShow;
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="顯示隱藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
16.狀態組件的狀態 （state setState）
示例1：
class Wrap extends React.Component{
constructor(){
super();
this.state = {
isShow:true
}
}
changeIsShow(){
// this.state.isShow = !this.state.isShow;
// 更新你的數據，將你的ReactDOM.render重新執行。
this.setState({
isShow:!this.state.isShow
})
}
render(){
console.log("render");
return (
<div>
<input type="button" onClick={this.changeIsShow.bind(this)} value="顯示隱藏"/>
<div style={{
width:"200px",
height:"200px",
background:"red",
display:this.state.isShow?"block":"none"
}}>
</div>
</div>
)
}
}
ReactDOM.render(<Wrap></Wrap>,document.querySelector("#myApp"));
示例2：
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum(){
// this.state.num = this.state.num+1;
// ReactDOM.render((
// <div>
// <Wrap></Wrap>
// </div>
// ),document.querySelector("#myApp"));
// 異步執行
this.setState({
num:this.state.num+1
},()=>{// 當你的數據更新完畢以后會執行該函數
console.log(this.state.num)
})
// console.log(this.state.num)
}
render(){
return (
<div>
<input type="button" onClick={this.changeNum.bind(this)} value={this.state.num} />
</div>
)
}
}
ReactDOM.render((
<div>
<Wrap></Wrap>
</div>
),document.querySelector("#myApp"));
關於事件this綁定問題（undefined）:
1.直接使用bind， 當前函數的使用頻率不高；
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum(){
this.setState({
num:this.state.num+1
},()=>{// 當你的數據更新完畢以后會執行該函數
console.log(this.state.num)
})
}
render(){
return (
<div>
<input type="button"
onClick{this.changeNum.bind(this)}
value={this.state.num}/>
</div>
)
}
}
2.直接寫函數， 該函數沒有重用，並且邏輯代碼較少
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.setState({
num:this.state.num+1
})
}} value={this.state.num}/>
</div>
)
}
}
3.在構造器當中使用bind， 當前組件函數較少，但使用的頻率比較高
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
this.abc = this.changeNum.bind(this);
}
changeNum(){
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={this.abc} value{this.state.num}/>
</div>
)
}
}
4.直接將函數定義為箭頭函數， 可以重用，不可bind，但是傳值麻煩
class Wrap extends React.Component{
constructor(){
super();
this.state = {
num:9
}
}
changeNum=()=>{
this.setState({
num:this.state.num+1
})
}
render(){
return (
<div>
<input type="button" onClick={()=>{
this.changeNum(123);
}} value={this.state.num}/>
</div>
)
}
}