目錄
1.表單
在 React 裏，HTML 表單元素的工作方式和其他的 DOM 元素有些不同。
一般來說，表單以及表單中的控件（如：input、select……）是頁面中與 JavaScript 打交道最多的元素了。雖然我們可以通過 ref 的形式去操作它們，但是這樣會比較麻煩，React.js 爲我們提供了一個更好的方式把 React.js 中的數據以及邏輯與表單控件關聯起來。
1.1受控組件
受控組件: 用 props 傳入數據的話，組件可以被認爲是受控（因爲組件被父級傳入的 props 控制）非受控組件: 數據不受外部傳入props數據控制，只保存在組件內部的 state 的話，是非受控組件（因爲外部沒辦法直接控制 state）
廣義來說，頁面中的任意元素都是一個獨立的組件，表單控件也是，它們內部也會維護屬於自己的狀態（如：value，selected，checked……），當然這些狀態是由原生實現的，而非 React.js 來控制的，但是有的時候我們希望通過 React.js 來管理和維護表單控件的狀態，我們把這種控件（控件）稱爲： 受控組件， 針對不同的組件，狀態的維護方式也有所差異
- input
- textarea
- select
通過 state 來控制組件狀態
- 創建 state 與組件的某個狀態進行綁定
- 監聽組件某些事件來更新 state
怎樣將非受控組件變成受控組件？
- input非受控組件，內部維護私有數據（value），不受外部傳入props參數控制；
- 非受控組件要轉變爲受控組件：通過onChange監聽數據的改變，然後獲取事件對象解構後的target，再得到裏面的數據
如<input type="text" value={this.state.v1} />是非受控組件，value值，由自己維護自己內部的狀態不由外部更改，不接收外部傳入的參數props。此時想要input輸入框更改後，input的value也變化是不可能，這就是非受控組件。
通過onChange監聽非受控組件的事件onChange={this.changeValue}， this.changeValue = this.changeValue.bind(this)進行綁定，此時changeValue方法中會獲得一個事件對象（第一個參數就是事件對象） ，通過事件對象就可以獲得輸入的值，<input type="text" value={this.state.v1} onChange={this.changeValue} />即可綁定輸入框的值。
changeValue({target:{value:v1}}) {
this.setState({
v1
});
}
1.1.1input
受控的屬性爲 value 屬性。
import React from 'react';
class CanControll extends React.Component{
constructor(props){
super(props);
//1.創建state狀態，使val與input的value值進行綁定
this.state = {
val:'kaikeba'
}
this.changeVal = this.changeVal.bind(this);
}
//2.監聽組件onChange事件來更新state
//將target解構出來，再對裏面的對象進行解構，賦值給別名val
changeVal({target:{value:val}}){
// const user = {
// id: 123,
// name: 'hehe',
// education: {
// degree: 'Masters'
// }
// };
// const {education: {degree:vala}} = user;
// console.log(vala); //prints: Masters
//注意setState()是方法
this.setState({
val
})
}
// changeVal(e) {
// this.setState({
// val: e.target.value
// });
// }
render(){
return(
<div>
<input type="text" value={this.state.val} onChange={this.changeVal} />
<hr/>
{this.state.val}
</div>
);
}
}
export default CanControll;
通過受控組件，可以更加便捷的操控組件交互
...
changeValue({target:{value}}) {
this.setState({
v1: value.toUpperCase()
});
}
...
1.1.2textarea
textarea 與 input 原理類似，但是需要注意的是： 使用 value ，而不是 內容（innerHTML）
// 正確
<textarea value={this.state.v2} onChange={this.changeValue2} cols="30" rows="10"></textarea>
// 錯誤
<textarea onChange={this.changeValue2} cols="30" rows="10">{this.state.v2}</textarea>
1.1.3select——單選
select 在 React.js 中也做了一些處理，不再是通過 selected 屬性來表示選中元素，而是通過 select 標籤的 value 屬性。
注意：結構時使用{target:{value}} ，再將value值設置給state的val
import React from 'react';
/**
* select的非受控組件——單選
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.創建state狀態，使val與input的value值進行綁定
this.state = {
val: 'html'
}
this.changeVal = this.changeVal.bind(this);
}
//2.監聽組件onChange事件來更新state
//將target解構出來，再對裏面的對象進行解構，賦值給別名val
changeVal({target:{value}}) {
console.log(value);
this.setState({
val:value
})
}
render() {
return (
<div>
<select value={this.state.val} onChange={this.changeVal}>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
<hr/>
<div>{this.state.val}</div>
</div>
);
}
}
export default CanControll;
1.1.4select——多選
我們還可以設置多選 select，對應的 value 就是一個數組
...
this.state = {
v4: ['html', 'javascript']
}
...
...
changeValue4({target:{options}}) {
this.setState({
v4: [...options].filter(o=>o.selected).map(o=>o.value)
});
}
...
...
<select value={this.state.v4} onChange={this.changeValue4} multiple>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
...
示例：
import React from 'react';
/**
* select（多選：從多個選項中選擇一個）的非受控組件
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.創建state狀態，使val與input的value值進行綁定
this.state = {
//select多選時，對應的 value 就是一個數組
val: ['html','js']
}
this.changeVal = this.changeVal.bind(this);
}
//2.監聽組件onChange事件來更新state
changeVal({ target: { options } }) {
this.setState({
//因爲select多選對應的value是數組，所以通過擴展運算符，將options中所有值展開到數組中
val: [...options].filter(o=>o.selected).map(o=>o.value)
})
}
render() {
return (
<div>
<select value={this.state.val} onChange={this.changeVal} multiple>
<option value="html">html</option>
<option value="css">css</option>
<option value="javascript">javascript</option>
</select>
<hr />
{this.state.val.join(',')}
</div>
);
}
}
export default CanControll;
1.1.5單選
radio 和下面的 checkbox 需要注意的是，受控的屬性不在是 value ，而是 checked
...
this.state = {
v5: '女',
v6: ['前端', '後端'],
}
...
changeValue5(e) {
this.setState({
v5: e.target.value
});
}
changeValue6({target:{value}}) {
let {v6} = this.state;
if (v6.includes(value)) {
v6 = v6.filter(v=>v!==value);
} else {
v6.push(value)
}
this.setState({
v6
});
}
...
...
<label><input name="gender" type="radio" value="男" checked={this.state.v5==='男'} onChange={this.changeValue5} />男</label>
<label><input name="gender" type="radio" value="女" checked={this.state.v5==='女'} onChange={this.changeValue5} />女</label>
<label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
<label><input name="interest" type="checkbox" value="後端" checked={this.state.v6.includes('後端')} onChange={this.changeValue6} />後端</label>
...
示例：
import React from 'react';
/**
* radio和checkbox的非受控組件
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
//1.創建state狀態，使val與input的value值進行綁定
this.state = {
v5: '女',
v6: ['前端', '後端'],
}
this.changeValue5 = this.changeValue5.bind(this);
this.changeValue6 = this.changeValue6.bind(this);
}
//2.監聽組件onChange事件來更新state
changeValue5({ target: { value: v5 } }) {
this.setState({
v5
});
}
changeValue6({ target: { value } }) {
let { v6 } = this.state;
if (v6.includes(value)) {
v6 = v6.filter(v => v !== value);
} else {
v6.push(value)
}
this.setState({
v6
});
}
render() {
return (
<div>
<label><input name="gender" type="radio" value="男" checked={this.state.v5 === '男'} onChange={this.changeValue5} />男</label>
<label><input name="gender" type="radio" value="女" checked={this.state.v5 === '女'} onChange={this.changeValue5} />女</label>
<label><input name="interest" type="checkbox" value="前端" checked={this.state.v6.includes('前端')} onChange={this.changeValue6} />前端</label>
<label><input name="interest" type="checkbox" value="後端" checked={this.state.v6.includes('後端')} onChange={this.changeValue6} />後端</label>
</div>
);
}
}
export default CanControll;
1.2非受控組件——Refs & DOM（操作DOM元素）
話又說回來，通過上面的學習，我們知道，每個受控組件，且不同的類型的受控組件它能控制的狀態只有那麼一些：value、checked，但是實際上一個組件的狀態遠遠不止這些，比如 input 的焦點、禁用、只讀 等，都是組件的狀態，如果每一個狀態都通過上面的方式來管理，就會特別的麻煩了。不是有了React和Vue等框架後就不需要操作DOM元素了，這個時候，我們就需要用其他方式來處理了：DOM
Refs & DOM
React.js 提供了多種方式來獲取 DOM 元素：
-
回調 Refs
-
React.createRef()
1.2.1ref 屬性
無論是 回調 Refs 還是 React.createRef()，都需要通過一個屬性 ref 來進行設置。ref屬性值時一個函數。
<input ref={?} />
示例：
import React from 'react';
/**
* 非受控組件：Ref屬性和回調refs——獲取元素信息
*/
class CanControll extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
// Ref屬性獲取div信息
this.getElementInfo = this.getElementInfo.bind(this);
//使用React.createRef()需要在構造函數中掛載
this.refDiv = React.createRef();
}
//獲取複製信息
selectURL(){
//選中input的內容
this.refInput.select();
console.log(this.refInput.value);
}
//獲取元素信息
getElementInfo(){
console.log(this.refDiv.current.offsetHeight);
}
render() {
return (
<div>
{/* 此處el=>this.refInput = el 相當於方法
function(el){
this.refInput = el;//將當前元素el複製給this.refInput,但是此處this指向undefined，所以需要使用箭頭函數
}
*/}
<input ref={el=>this.refInput = el} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>點擊複製</button>
<hr />
<button onClick={this.getElementInfo}>獲取元素信息</button>
<div ref={this.refDiv} style={{ width: '100px', height: '100px', background: 'red' }}></div>
</div>
);
}
}
export default CanControll;
1.2.2回調 Refs
這種方式，我們在前面已經使用過了
class UnControlledComponent extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
this.getElementInfo = this.getElementInfo.bind(this);
}
selectURL() {
this.refInput.select();
}
getElementInfo() {
this.refDiv.getBoundingClientRect()
}
render() {
return (
<input ref={el => this.refInput = el} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>點擊複製</button>
<hr/>
<button onClick={this.getElementInfo}>獲取元素信息</button>
<div ref={el => this.refDiv = el} style={{width: '100px', height:'100px',background:'red'}}></div>
)
}
}
1.2.3React.createRef()
該方法返回一個 ref 對象，在 jsx 通過 ref 屬性綁定該對象，該對象下的 current 屬性就指向了綁定的元素或組件對象
class ChildComponent extends React.Component {
constructor(props) {
super(props);
}
hello() {
console.log('ChildComponent');
}
render() {
return(
<div>
<h2>ChildComponent</h2>
</div>
);
}
}
class UnControlledComponent extends React.Component {
constructor(props) {
super(props);
this.selectURL = this.selectURL.bind(this);
this.getElementInfo = this.getElementInfo.bind(this);
this.refInput = React.createRef();
this.refDiv = React.createRef();
this.refChild = React.createRef();
}
selectURL() {
this.refInput.current.select();
}
getElementInfo() {
this.refDiv.current.getBoundingClientRect()
}
getElementInfo() {
this.refChild.current;
}
render() {
return (
<input ref={this.refInput} type="text" value="http://kaikeba.com" />
<button onClick={this.selectURL}>點擊複製</button>
<hr/>
<button onClick={this.getElementInfo}>獲取元素信息</button>
<div ref={this.refDiv} style={{width: '100px', height:'100px',background:'red'}}></div>
<hr/>
<ChildComponent ref={this.refChild} />
<button onClick={this.getReactComponent}>獲取 React 實例對象</button>
)
}
}
2.建議
- 儘量避免從 props 中派生 state
- 儘量使用 props，避免使用 state