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

可以在return中使用對象的方式，輸出表達式。

也就是花括號的方式{1+2}

jsx里只能寫表達式，不能寫語句。

return 中可以直接使用html標簽的這種語法稱為jsx

定義一個React組件。

• import {Component} from 'react'

• 多個包逗號分隔開
  

• extends Component

• 也可以寫做class clsName extends React.Component,同時去掉import {Component}

• 實現render()函數，當然也存在不同的事件可以實現。
  

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

大寫字母開頭的都是組件

ReactDom.render(..,dom) 負責渲染到dom

JS定義變量有三種方式

1. const? 不可改變

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

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

[...this.state.list ]中的 ... 是等價運算符

(x) => x + 6

相當于

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

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

/*組件拆分
*?父組件通過屬性的形勢向子組件傳遞參數
*?子組件通過props接收父組件傳遞過來的參數*/

//子組件想和父組件通信,子組件要調用父組件傳遞過來的方法

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

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

constructor(props){
????super(props);
????this.state={
????????list:[],
????????inputValue:''?//清空
????}
}
//2.當點擊提交時,列表添加
handleBtnClick(){
????this.setState({
????????list:[...this.state.list,this.state.inputValue],
????????inputValue:''?//清空
????});
}
//1.先執(zhí)行輸入框的監(jiān)聽事件,當值改變時監(jiān)聽
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>
????????????????{/*表達式*/}
????????????????{
????????????????????this.state.list.map((item,index)=>{
????????????????????????return?<li?key={index}>{item}</li>
????????????????????})
????????????????}
????????????</ul>
????????</div>
????);
}

//父組件通過屬性的形式向子組件傳遞參數

//子組件通過props接受父組件傳遞過來的參數

父組件：TodoList

子組件：TodoItem

子組件 想和父組件通信，子組件要調用父組件傳遞過來的方法

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

父組件TodoList.js 中————

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

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

父組件通過屬性的方式向子組件傳遞參數
如父組件中 TodoList.js 中

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

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


子組件TodoItem.js通過?props 的形式接收從父組件傳遞過來的參數

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

????

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

handleItemClick (index){

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

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

????//將刪除后的數組放置在state中，

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

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

????????})

}

????

在render() 函數中的return 中，寫入 ————

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

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

在handleInputChange 函數中，時刻監(jiān)聽 value 值 e.target.value