第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

可以在return中使用對(duì)象的方式，輸出表達(dá)式。

也就是花括號(hào)的方式{1+2}

jsx里只能寫(xiě)表達(dá)式，不能寫(xiě)語(yǔ)句。

return 中可以直接使用html標(biāo)簽的這種語(yǔ)法稱為jsx

定義一個(gè)React組件。

• import {Component} from 'react'

• 多個(gè)包逗號(hào)分隔開(kāi)
  

• extends Component

• 也可以寫(xiě)做class clsName extends React.Component,同時(shí)去掉import {Component}

• 實(shí)現(xiàn)render()函數(shù)，當(dāng)然也存在不同的事件可以實(shí)現(xiàn)。
  

語(yǔ)法規(guī)范，以及React的約定。

大寫(xiě)字母開(kāi)頭的都是組件

ReactDom.render(..,dom) 負(fù)責(zé)渲染到dom

JS定義變量有三種方式

1. const? 不可改變

2. let 區(qū)塊代碼內(nèi)有效

3. var 可以修改 初始化是undefined

[...this.state.list ]中的 ... 是等價(jià)運(yùn)算符

(x) => x + 6

相當(dāng)于

function(x){????
???return?x?+?6;
};

LTS版本 = long time sport 永久支持穩(wěn)定版?

/*組件拆分
*?父組件通過(guò)屬性的形勢(shì)向子組件傳遞參數(shù)
*?子組件通過(guò)props接收父組件傳遞過(guò)來(lái)的參數(shù)*/

//子組件想和父組件通信,子組件要調(diào)用父組件傳遞過(guò)來(lái)的方法

//添加綁定事件?
<li?key={index}?onClick={this.handleItemClick.bind(this,index)}>{item}</li>

//刪除列表的綁定事件
handleItemClick(index){
????const?list?=?[...this.state.list];?//復(fù)制副本操作
????list.splice(index,1);?//刪除對(duì)應(yīng)角標(biāo)列表
????this.setState({
????????list:list?//新list替換老list
????})
}

constructor(props){
????super(props);
????this.state={
????????list:[],
????????inputValue:''?//清空
????}
}
//2.當(dāng)點(diǎn)擊提交時(shí),列表添加
handleBtnClick(){
????this.setState({
????????list:[...this.state.list,this.state.inputValue],
????????inputValue:''?//清空
????});
}
//1.先執(zhí)行輸入框的監(jiān)聽(tīng)事件,當(dāng)值改變時(shí)監(jiān)聽(tīng)
handleInputChange(e){
????this.setState({
????????inputValue:e.target.value?//獲取input框的值
????})
}
render()?{
????return?(
????????<div>
???????????<div>
???????????????<input?value={this.state.inputValue}?onChange={this.handleInputChange.bind(this)}/>
???????????????<button?onClick={this.handleBtnClick.bind(this)}>add</button>
???????????</div>
????????????<ul>
????????????????{/*表達(dá)式*/}
????????????????{
????????????????????this.state.list.map((item,index)=>{
????????????????????????return?<li?key={index}>{item}</li>
????????????????????})
????????????????}
????????????</ul>
????????</div>
????);
}

//父組件通過(guò)屬性的形式向子組件傳遞參數(shù)

//子組件通過(guò)props接受父組件傳遞過(guò)來(lái)的參數(shù)

父組件：TodoList

子組件：TodoItem

子組件 想和父組件通信，子組件要調(diào)用父組件傳遞過(guò)來(lái)的方法

子組件 TodoItem.js函數(shù)中 ————this.props.delete(this.props.index)?

父組件TodoList.js 中————

handleDelete是父組件的函數(shù),將傳遞給子組件的是delete 、content、index

<TodoItem delete={this.handleDelete.bind(this)}? ?key={index}? content={item}? index={index} />

父組件通過(guò)屬性的方式向子組件傳遞參數(shù)
如父組件中 TodoList.js 中

????????????// 告訴子組件 父組件將展示 item

????return? <TodoItem key={index} content={item}/>??


子組件TodoItem.js通過(guò)?props 的形式接收從父組件傳遞過(guò)來(lái)的參數(shù)

子組件中?
?????<div>{this.props.content}</div>

????

react 操作數(shù)據(jù)，不需要操作dom ;
在react 中操作 state中的數(shù)據(jù)，盡量不直接操作state的數(shù)據(jù)，而是拿一個(gè)變量接收后，再操作該變量
如刪除函數(shù)?

handleItemClick (index){

????const newList = [...this.state.list];? // 拿newList接收?state中l(wèi)ist的值

????newList.splice(index,1); //刪除newList中de 該 index的值

????//將刪除后的數(shù)組放置在state中，

????????this.setState({

????????????list:newList

????????})

}

????

在render() 函數(shù)中的return 中，寫(xiě)入 ————

//onChange 事件監(jiān)聽(tīng) input框的value值發(fā)生變化

<input onChange={this.handleInputChange.bind(this)}/>

在handleInputChange 函數(shù)中，時(shí)刻監(jiān)聽(tīng) value 值 e.target.value