1、React 框架簡(jiǎn)介

1.1、介紹

CS 與 BS結(jié)合：像 React，Vue 此類框架，轉(zhuǎn)移了部分服務(wù)器的功能到客戶端。將CS 和 BS 加以結(jié)合?？蛻舳酥挥谜?qǐng)求一次服務(wù)器，服務(wù)器就將所有js代碼返回給客戶端，所有交互類操作都不再依賴服務(wù)器。 客戶端只有在需要服務(wù)器的數(shù)據(jù)時(shí)才會(huì)使用json通信一下，其他時(shí)間都在客戶端利用js操作、暫存數(shù)據(jù)這樣就極大減輕了服務(wù)器壓力。

1.2、React 特性

• 虛擬DOM樹(shù)

React 通過(guò)對(duì) DOM 的模擬，最大限度地減少與DOM的交互。將網(wǎng)頁(yè)的DOM樹(shù)完全復(fù)制一份虛擬的 DOM 樹(shù)放到內(nèi)存中。

• ?數(shù)據(jù)驅(qū)動(dòng)

維護(hù)虛擬 DOM 樹(shù)，當(dāng)發(fā)現(xiàn)某些節(jié)點(diǎn)發(fā)生變化時(shí)，并不一定修改原來(lái)的 DOM 樹(shù)（在網(wǎng)頁(yè)中看到的每一個(gè)區(qū)域），比如某些分支可能會(huì)發(fā)生該改變時(shí)，首先會(huì)修改虛擬樹(shù)中的這幾個(gè)節(jié)點(diǎn)，而后將這幾個(gè)節(jié)點(diǎn)與原節(jié)點(diǎn)對(duì)比。才會(huì)對(duì)真正發(fā)生改變的節(jié)點(diǎn)做出修改。

?1.3、JSX文件?

為了構(gòu)建交互式用戶界面，使用了 JSX。JSX 的完整版本是一個(gè)JavaScript語(yǔ)法擴(kuò)展，它極大地簡(jiǎn)化了組件的創(chuàng)建。它支持HTML引用并使子組件渲染更容易。它本質(zhì)上是一組 React 編寫快捷方式。使用帶有一些規(guī)則的 createElement 可以使源代碼更具可讀性和直接性。首先寫jsx文件，運(yùn)行時(shí)會(huì)先將所編寫的jsx編譯為js，編譯完之后，將js文件運(yùn)行在瀏覽器。

2、配置環(huán)境

2.1、安裝?Git Bash

Git bash 下載鏈接
Git Bash 安裝教程

2.2、安裝?Node.js

Nodejs 下載鏈接
Nodejs 安裝教程

2.3、安裝?create-react-app

打開(kāi) Git Bash，直接輸入下面命令執(zhí)行
npm i -g create-react-app

2.4、創(chuàng)建 React 項(xiàng)目，名為 React App

在目標(biāo)目錄（自己存放項(xiàng)目的目錄）下右鍵打開(kāi) Git Bash，執(zhí)行下面的命令

create-react-app react-app  # react-app可以替換為其它名稱

2.5、啟動(dòng)項(xiàng)目

進(jìn)入目錄，目錄進(jìn)到 react-app 這一層，打開(kāi) Git Bash，輸入下面命令

npm start  # 啟動(dòng)應(yīng)用

3、組件（Component）?

組件類似于一個(gè) class，將一些 html、data(數(shù)據(jù))、事件函數(shù)組合在一起成為一個(gè)組件

3.1、定義組件

定義好組件之后，需要將組件渲染出來(lái)，index.js 就是所有 js 的入口， 并引入React與Component組件。

// box.js 文件
import React, { Component } from 'react';  		// 快捷鍵：imrc // 引入React原因：將jsx編譯為js
// 通過(guò)React.createElement()class Box extends Component {					// 快捷鍵：CCstate = {  } 								//局部變量// component類的函數(shù)，用來(lái)返回當(dāng)前組件最后的渲染html結(jié)構(gòu)// render方法只能返回一個(gè)標(biāo)簽及所包含內(nèi)容render() { return (<h1> Hello world</h1>);}
}export default Box;

// index.js 文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';   		// 引入bootstrap庫(kù)
import Box from './components/box';        			// 引入boxconst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Box /> 										// Box組件，見(jiàn)box.js</React.StrictMode>
);

3.2、React Fragment 介紹與使用

• ?render()方法只能返回一個(gè)標(biāo)簽及所包含內(nèi)容，想返回多個(gè)并列標(biāo)簽時(shí)需要包含在一個(gè)標(biāo)簽內(nèi)。
• React.Fragment 組件能夠在不額外創(chuàng)建 DOM 元素的情況下，讓render()方法中返回多個(gè)元素。Fragments 允許將子列表分組，而無(wú)需向DOM添加額外標(biāo)簽。

理解起來(lái)就是在我們定義組件的時(shí)候，return里最外層包裹的div往往不想渲染到頁(yè)面，那么就要用到Fragment組件了。

class Box extends Component { 
state = {  } 
render() { return (<React.Fragment><h1> Hello world</h1><button>left</button><button>right</button></React.Fragment>);
}
}

3.3、在 jsx 中寫 js 與 html 標(biāo)簽

jsx 中可以在任意地方定義 html 標(biāo)簽，但要注意，jsx 里的 html 標(biāo)簽中寫 js 代碼時(shí)都需要加 {} 括起來(lái)，{} 中只能寫表達(dá)式。

render() { return (<React.Fragment><h1>{this.toString()}</h1>  		// html 標(biāo)簽內(nèi)寫js<button className="btn btn-primary">left</button><button>right</button></React.Fragment>);
}toString(){return `x: ${this.state.x}`;// 或者// const {x} = this.state; //ES6寫法相當(dāng)于const xxx = this.state.xxx// return `x:${x}`;
}

3.4、設(shè)置樣式

jsx文件下的html 標(biāo)簽中設(shè)置類名以用于 css 樣式時(shí)，需要將 class =" "寫為 className。 由于 jsx 下 html 標(biāo)簽與 js 語(yǔ)句混合，寫 class 可能會(huì)與實(shí)際js中的同名類產(chǎn)生沖突。

? className

return (<React.Fragment><h1>{this.toString()}</h1>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>// m-2 為 bootstrap 中 margin=2 的簡(jiǎn)寫方式
);

? style

render() { return (<React.Fragment>// style樣式：第一層{}代表里面是表達(dá)式，第二層{}代表里面是對(duì)象，即樣式變量的內(nèi)容<div style={{width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",}}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

等價(jià)于：

styles = {width: "50px",height: "50px",backgroundColor: "pink", 					// css中所有 - 命名均改為駝峰命名法
}render() { return (    								// 標(biāo)簽內(nèi) style={this.styele} 即可<React.Fragment><div style={this.styles}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

3.5、數(shù)據(jù)驅(qū)動(dòng)改變 style

將 style 與 state（局部變量） 值相關(guān)聯(lián)，通過(guò)改變 state 里的值來(lái)改變 style。當(dāng)局部變量改變時(shí)，通過(guò)接口實(shí)現(xiàn)所有被這個(gè)值影響的組件都改變。

state = { x: 1,} getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',};if (this.state.x === 0){styles.backgroundColor = 'orange'; // 數(shù)據(jù)驅(qū)動(dòng)改變style}return styles;
}

 render() { return (// 直接調(diào)用 getStyles()函數(shù)<React.Fragment><div style={this.getStyles()}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

3.6、渲染列表

使用 map 函數(shù)

遍歷類寫法需給每個(gè)標(biāo)簽元素定義唯一 key 屬性，用來(lái)幫助React快速找到被修改的DOM元素

class Box extends Component { state = { x: 1,colors: ['red','green','blue'],   		// 定義渲染列表，這里用來(lái)修改div元素內(nèi)容} render() { return (<React.Fragment>{this.state.colors.map(color => (<div key={color}>{color}</div> // 這里建立div并將內(nèi)容賦值為上述列表))}             </React.Fragment>);}}

3.7、Conditional Rendering

A && B && C ...：從前往后，返回第一個(gè)為 false 的表達(dá)式。( 如果全為 true，就返回最后一個(gè) true 表達(dá)式）
A || B || C ...：從前往后，返回第一個(gè)為 true 的表達(dá)式。（如果全為 false，就返回最后一個(gè) false 表達(dá)式。）

即利用邏輯表達(dá)式的短路原則：

 render() {       return (     <React.Fragment>   {this.state.colors.length === 0 && <p> No colors</p>}   // 即當(dāng) colors 有元素時(shí)無(wú)操作， 即當(dāng) colors 無(wú)元素時(shí)顯示 No color{this.state.colors.map(color => (<div key={color}>{color}</div>))}             </React.Fragment>           );
}

3.8、綁定事件

class Box extends Component {handleClickLeft(){console.log("click left",this); }handleClickRight(){console.log("click right",this);}render() { //僅僅是綁定函數(shù)，而不是在渲染時(shí)就將返回值傳過(guò)來(lái)，因此handleClickleft不加()    return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>}
}

此時(shí)，輸出的 this 不是 Box 類，而是 undifind。

如何使得方法里的 this 仍屬于 Box 類：
// 法一：箭頭函數(shù)（推薦）
// 法二： bind 函數(shù)

handleClickLeft=()=>{						 // 法一：箭頭函數(shù)console.log("click left",this); 
}handleClickRight(){console.log("click right",this);
}render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight.bind(this)} className="btn btn-success m-2">right</button>          </React.Fragment>					// 法二：bind函數(shù));
}

3.9、修改 state 里的值

直接 this.state.x-- 不會(huì)影響到頁(yè)面div的顯示的x值，
如果想要讓 state 里的 x 的修改影響到render函數(shù)的話， 必須用 setState() 函數(shù) （通過(guò)重新調(diào)用 render 修改 div 里 x 值）

class Box extends Component {state = { x: 1,} handleClickLeft = () => { this.setState({				// setState() 函數(shù)x: this.state.x - 1});}handleClickRight = () => {this.setState({					// setState() 函數(shù)x: this.state.x + 1});}render() {    return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>);}
}

3.10、通過(guò)按鈕修改css屬性

將 state 里的值賦值給某一樣式的屬性，通過(guò)按鈕修改state 值從而修改 css 樣式

class Box extends Component {state = { x: 10, 							// state值} handleClickLeft = () => { this.setState({x: this.state.x - 10			// setState() 修改 state值, 重新調(diào)用 render() 函數(shù)});}handleClickRight = () => {this.setState({x: this.state.x + 10		// setState() 修改 state值，重新調(diào)用 render() 函數(shù)});}render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>);}getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',marginLeft: this.state.x,              //  state值賦值給 css 屬性值};if (this.state.x === 0){styles.backgroundColor = 'orange';}return styles;}		
}

3.11、給事件函數(shù)添加參數(shù)

handleClickRight = (step) => {this.setState({x: this.state.x + step});
}

handleClickRightTmp = () => {return this.handleClickRight(50);
}

 render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRightTmp} className="btn btn-success m-2">right</button>          </React.Fragment>);
}

將 handleClickRight() 函數(shù)寫為箭頭匿名函數(shù)后等價(jià)于：?

render() { //    綁定了一個(gè)調(diào)用含參 函數(shù) handleClickLeft =(step)=>{ }  的匿名函數(shù)  return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);}

綜上，Box組件的構(gòu)建步驟：

1、定義?state?變量，并使得數(shù)據(jù)驅(qū)動(dòng)?style；

2、構(gòu)造 handleClickLeft =(step)=>{ } 帶參函數(shù)，利用?setState()?函數(shù)改變?state?值；調(diào)用setState()能夠重新加載 render 函數(shù)，才可以對(duì)里面的 div 顯示進(jìn)行修改

3、給按鈕的單擊事件onClick綁定所寫函數(shù)。這里綁定了一個(gè)調(diào)用含參函數(shù) handleClickLeft =(step)=>{ } 的匿名函數(shù)，()=>this.handleClickRight(10)

class Box extends Component {// 1. 定義 state，并使得數(shù)據(jù)驅(qū)動(dòng)stylestate = { x: 10,} // 2. 通過(guò) handleClickLeft =(step)=>{ } 帶參函數(shù) 與 setState()  改變state值//    并能夠重新加載 render 函數(shù)來(lái)對(duì)里面的 div 顯示進(jìn)行操作handleClickLeft = (step) => { this.setState({x: this.state.x - step});}handleClickRight = (step) => {this.setState({x: this.state.x + step});}render() { // 3. 給事件綁定函數(shù)：通過(guò) render 函數(shù)里，按鈕事件綁定函數(shù)。//    綁定了一個(gè)調(diào)用含參函數(shù) handleClickLeft =(step)=>{ }  的匿名函數(shù)  return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);}getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',marginLeft: this.state.x,	// 數(shù)據(jù)驅(qū)動(dòng) style};if (this.state.x === 0){styles.backgroundColor = 'orange';}return styles;}
}

4、Component 組件的組合與交互

4.1、【組合 Component 】組件的構(gòu)建

組合多個(gè)上述定義的 Box 組件，形成 Boxes 組件，并完成 屬性 值的傳遞。
<注：多個(gè)相同子組件時(shí)，每個(gè)子組件需要有唯一 key 值>

• 建立?Boxes?類組件，內(nèi)含多個(gè)?Box組件

import React, { Component } from 'react';
import Box from './box';class Boxes extends Component {// 1. 設(shè)置 state 變量，包括 Box 組件的唯一 key 值與 x 坐標(biāo)值。state = {  boxes:[{id: 1, x: 10},{id: 2, x: 10},{id: 3, x: 100},{id: 4, x: 10},{id: 5, x: 10},]} // 2. render 函數(shù)返回多個(gè) box 組件，通過(guò) map 列表，逐一建立并賦值多個(gè) Box 組件//    將 box.id 賦值給組件唯一 key，將 box.x 賦值給 Box 組件的 xrender() { return (<React.Fragment>{this.state.boxes.map((box)=>(<Boxkey = {box.id} // idx = {box.x}    // 這里會(huì)自動(dòng)找到 Box 組件里的 x 賦值并存儲(chǔ)在 props 中// 但僅僅是修改了x，并不會(huì)改變前端的顯示/>))}</React.Fragment>);}
}export default Boxes;

【注】在react組件之間的通信是通過(guò)props屬性來(lái)完成的，比如父組件需要將數(shù)據(jù)傳遞給子組件，那么組件在渲染子組件的時(shí)候，直接將數(shù)據(jù)作為子組件的屬性傳參。

• ?state 值傳遞：通過(guò)?props?將?Boxes定義的屬性值返回傳遞給?Box的

class Box extends Component {state = { // props類似于state，存儲(chǔ)除key以外屬于 box 的所有屬性// Boxes 建立的 Box 賦值的 x 存到了 props 里// 通過(guò) props 傳遞給了每個(gè) Boxx: this.props.x,} handleClickLeft = (step) => { this.setState({x: this.state.x - step});}handleClickRight = (step) => {this.setState({x: this.state.x + step});}render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);}getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',marginLeft: this.state.x,};if (this.state.x === 0){styles.backgroundColor = 'orange';}return styles;}toString(){return `x: ${this.state.x}`;	        }
}export default Box;

• 標(biāo)簽傳遞：通過(guò)?props?將Boxes?增加的Box.children子標(biāo)簽，傳遞給?Box

 // Boxes.jsx文件render() { return (<React.Fragment>{this.state.boxes.map((box)=>(<Box key = {box.id} x = {box.x}> <p>Box :</p>				// 將 Box 的閉合標(biāo)簽寫為雙標(biāo)簽<div>{box.id}</div>			// 可在 Box 標(biāo)簽內(nèi)增加其它標(biāo)簽，屬性名為 Box.children</Box>							// 并存儲(chǔ)到了 props 中																))}</React.Fragment>);
}

// Box.jsx 文件
render() { console.log(this.props); return (<React.Fragment>{this.props.children[0]}			// 通過(guò) props 所存儲(chǔ)的 children 將增加的標(biāo)簽傳遞給Box<div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);
}

• 方法傳遞1：React 子組件調(diào)用父組件的方法。

Box子組件調(diào)用Boxes父組件內(nèi)的方法，依舊通過(guò)props。實(shí)現(xiàn)在?Box?組件中觸發(fā)?onClick?事件后，在Boxes組件中刪除key值對(duì)應(yīng)的Box，即在Box標(biāo)簽內(nèi)調(diào)用Boxes標(biāo)簽的方法

 // Boxes.jsx 文件// 1. Boxes.jsx 文件中寫刪除的方法handleDelete = (id) => {// filter: boxes列表的元素依次判斷，若表達(dá)式為true則留下，否則刪掉// 即若id不等留下來(lái)，相等刪除const newboxes = this.state.boxes.filter((x)=>(x.id !== id));this.setState({boxes: newboxes})}render() { if(this.state.boxes.length === 0){return <div className='alert alert-dark'>沒(méi)有元素可以刪除了!!!</div>}return (// 2. 將所寫刪除方法定義為標(biāo)簽的 onDelete 屬性傳遞給 Box（會(huì)存儲(chǔ)在 props中）<React.Fragment>{this.state.boxes.map((box)=>(<Box key = {box.id} id={box.id} x = {box.x} onDelete = {this.handleDelete}> <p>Box :</p><div>{box.id}</div>   </Box>))}</React.Fragment>);
}

// Box.jsx 文件render() {    return (<React.Fragment>{this.props.children[0]}<div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>// 3. Box 調(diào)用 Boxes 的刪除方法 ：//    Box 中的 Button 的 onClick 事件，綁定匿名函數(shù)來(lái)調(diào)用含參的刪除方法        <button onClick={()=>this.props.onDelete(this.props.id)} className='btn btn-danger m-2'> Delete </button></React.Fragment>);
}

• 方法傳遞2：React 父組件調(diào)用子組件的方法。

僅能調(diào)用一個(gè)子組件方法，無(wú)法調(diào)用列表子組件

// 父組件
class Boxes extends Component {// 1. Boxes 父組件中寫入setChildRef = (ref) => {this.ChildRef = ref;}// 3. Boxes 父組件中寫調(diào)用 Box 子組件的方法handleReset = () =>{this.ChildRef.handleRE()}render() {     return (<React.Fragment>// 4. 將父組件方法綁定onClick單擊事件中，即可實(shí)現(xiàn)單擊調(diào)用子組件的方法<button onClick={this.handleReset} className='btn btn-primary'> Clear </button>{this.state.boxes.map((box)=>( // 2. Boxes 父組件的 Box 子組件標(biāo)簽內(nèi)增加 ref 屬性，并將 setChildRef 傳遞過(guò)來(lái)<Box key = {box.id} ref={this.setChildRef} id={box.id} x = {box.x} onDelete = {this.handleDelete}> <p>Box :</p><div>{box.id}</div>   </Box>))}</React.Fragment>);}}

// 子組件
class Box extends Component {state = { x: this.props.x,} //  子組件中被調(diào)用的方法handleRE = () =>{this.setState({x: 0});}render() { return (<React.Fragment>......</React.Fragment>);}
}

5、組件使用

5.1、組件的生命周期

創(chuàng)建時(shí)（掛載階段）?

• 執(zhí)行時(shí)機(jī)：組件創(chuàng)建時(shí)（頁(yè)面加載時(shí)）
• 執(zhí)行順序：constructor() -> render() -> componentDidMount()

constructor()組件創(chuàng)建的時(shí)候，最先執(zhí)行，主要是初始化數(shù)據(jù)，為事件處理程序綁定this

render()：每次組件渲染觸發(fā)，主要是渲染UI

componentDidMOunt()：組件掛載完成，主要作用DOM操作，發(fā)送網(wǎng)絡(luò)請(qǐng)求

更新時(shí)（更新階段）

• 執(zhí)行時(shí)機(jī)：1.setState() 2.組件收到props變了 3.forceUpdate()
• 說(shuō)明：以上3中情況都會(huì)觸發(fā)
• 執(zhí)行順序：render() -> componentDidUpdate()

render():每次組件渲染觸發(fā)，渲染UI

componentDidUpdate()：組件 狀態(tài)更新完畢

預(yù)載時(shí)

• 執(zhí)行時(shí)機(jī)：組件從頁(yè)面消失

?5.2、動(dòng)態(tài)更新initialValue的值

[antd: Form.Item] defaultValue will not work on controlled Field. You should use initialValues o
原因：antd禁止在form.item下的組件使用默認(rèn)屬性
解決辦法：刪除defaultValue,在中使用initialValue={{ parentId: parentId }}代替，如果要?jiǎng)討B(tài)更新 parentId的值，又會(huì)導(dǎo)致下面的問(wèn)題

React does not recognize the initialValue prop on a DOM element.
**原因：**不能通過(guò)這種方法更新parentId的值，想要更新props中的值，要通過(guò)form.setFieldsValue({ parentId: parentId })進(jìn)行更改，

你不能用控件的 value 或 defaultValue 等屬性來(lái)設(shè)置表單域的值，默認(rèn)值可以用 Form 里的 initialValues 來(lái)設(shè)置。注意 initialValues 不能被 setState 動(dòng)態(tài)更新，你需要用 setFieldsValue 來(lái)更新。

由上可知，表單中不能設(shè)置默認(rèn)值，要想設(shè)置默認(rèn)值必須通過(guò)form中的initial Values進(jìn)行設(shè)置，但是其又不能動(dòng)態(tài)更新，想要達(dá)到動(dòng)態(tài)更新的效果必須使用form中的setFieldsValue進(jìn)行更新，需要檢測(cè)parentId的變化從而對(duì)parentId進(jìn)行修改，固需要在useEffect中使用setFieldsValue

如果需要在父組件中得到子組件的form表單中的值，可以通過(guò)函數(shù)傳參的方式，將子組件的form對(duì)象傳遞給父組件，這樣父組件得到子組件的form對(duì)象，就可以通過(guò)getFieldValue得到表單的值了。

    const [form] = Form.useForm()//將子組件的form傳遞給父組件，使得父組件可以取到子組件form中的categorieName的值props.setForm(form)// 動(dòng)態(tài)更新parentId的值useEffect(() => {form.setFieldsValue({ parentId: parentId })}, [parentId])

import React, { Fragment, useEffect } from 'react'
import { Form, Input, Select } from 'antd'
import { useForm } from 'antd/lib/form/Form';const { Option } = Select;export default function AddForm(props) {const { categorys, parentId } = propsconst [form] = Form.useForm()console.log(parentId)// 動(dòng)態(tài)更新parentId的值useEffect(() => {form.setFieldsValue({ parentId: parentId })}, [parentId])return (<Fragment>{/* initialValues不能被動(dòng)態(tài)更新，需要使用form.setFieldsValues進(jìn)行動(dòng)態(tài)更新，將其放在useEffect中 */}<Form form={form}><span>所屬分類</span><Form.Itemname="parentId"rules={[{required: true,message: 'Please select category!',},]}>{/* 表單中不能使用默認(rèn)屬性defaultValue，在form中使用initialValues{{}}代替 */}<Select ><Option value='0'>一級(jí)分類</Option>{categorys.map(c => <Option key={c._id} value={c._id}>{c.name}</Option>)}</Select></Form.Item><span>分類名稱</span><Form.Itemname="categoryName"rules={[{required: true,message: 'Please input your categoryName!'}]}><Input placeholder="添加分類" /></Form.Item></Form></Fragment >)
}

// 告警標(biāo)簽
// 動(dòng)態(tài)更新initialValue值
changeMissLevel = () =>{const{form} = this.props;form.setFieldsValue({missLevel:'222'});
}render(){<Form.Item>{getFieldDecorator('missLevel',{initialValue:this.state.missLevel})(<SelectonChange={this.changeMissLevel}><Option value= '1'>a</Option><Option value= '2'>b</Option></Select>)}</>
}

5.3、遍歷對(duì)象與數(shù)組

• 遍歷對(duì)象與數(shù)組

// 遍歷對(duì)象
const object  = {"a":"1","b":"2"};
for(let key in object){console.log(key);console.log(object[key]);
}// 遍歷數(shù)組
const array = ["1","2","3"];
const array1 = [{"a":"1"},{"b":"2"}];for(let key in array){console.log(array[key]);
}
for(let key in array1){console.log(array[key].a);console.log(array[key].b);
}

• ? 對(duì)象動(dòng)態(tài)值獲取或作為鍵?

// 動(dòng)態(tài)值作為鍵
const obj = {"a":"1","b":"2"};
let ccc = 'c';
obj[ccc] = '3';
// 對(duì)象賦值
obj.d = '4';
// 對(duì)象獲取值
let ddd = obj.d;// 對(duì)象動(dòng)態(tài)值獲取
const data = {"a":"1","b":"2"};
let aaa = 'a';
data[aaa+'']

• 對(duì)象與字符串的轉(zhuǎn)換?

// 對(duì)象轉(zhuǎn)字符串
const obj = {"a":"1"}
JSON.String(obj );
// 字符串轉(zhuǎn)對(duì)象
String a = "";
JSON.parse(a);// join與split
const aa = ["1","2"];
const bb = "1,2";
bb = aa.join(',');
aa = bb.split(",");

• 非空判斷?

// 判斷是否不為空
ifNotNull = (value:any) => {if( value != undefined &&value != null &&value != 'null' &&value != 'NULL' &&value != '[]' &&value != '' &&value != {} &&value != [] &&){return true;     } else {return false;}
}// 判斷是否為空
ifNotNull = (value:any) => {if( value === undefined ||value === null ||value === 'null' ||value === 'NULL' ||value === '[]' ||value === '' ||value === {} ||value === [] ||){return true;     } else {return false;}
}