系結this并傳參的三種方式
- 在事件中系結this并傳參：
<input type="button" value="https://www.cnblogs.com/ygjzs/p/在事件中系結this并傳參" onClick={this.handleMsg1.bind(this, '??', '??')} />
// 在事件中系結this并傳參
handleMsg1(arg1, arg2) {
console.log(this);
// 此時this是個null
this.setState({
msg: '在事件中系結this并傳參：' + arg1 + arg2
});
}
- 在建構式中系結this并傳參:
// 修改建構式中的代碼：
this.handleMsg2 = this.handleMsg2.bind(this, '??', '??');
<input type="button" value="https://www.cnblogs.com/ygjzs/p/在建構式中系結this并傳參" onClick={this.handleMsg2} />
// 在建構式中系結this并傳參
handleMsg2(arg1, arg2) {
this.setState({
msg: '在建構式中系結this并傳參：' + arg1 + arg2
});
}
- 用箭頭函式系結this并傳參：
<input type="button" value="https://www.cnblogs.com/ygjzs/p/用箭頭函式系結this并傳參" onClick={() => { this.handleMsg3('??', '??') }} />
// 用箭頭函式系結this并傳參
handleMsg3(arg1, arg2) {
this.setState({
msg: '用箭頭函式系結this并傳參：' + arg1 + arg2
});
}
系結文本框與state中的值
- 在Vue.js中，默認可以通過
v-model指令，將表單控制元件和我們的data上面的屬性進行雙向資料系結，資料變化和頁面之間的變化是同步的！ - 在React.js中，默認沒有提供雙向資料系結這一功能，默認的，只能把
state之上的資料同步到界面的控制元件上，但是不能默認實作把界面上資料的改變，同步到state之上，需要程式員手動呼叫相關的事件，來進行逆向的資料傳輸！ - 系結文本框和state的值：
{/*只要將value屬性，和state上的狀態進行系結，那么，這個表單元素就變成了受控表單元素，這時候，如果沒有呼叫相關的事件，是無法手動修改表單元素中的值的*/}
<input style={{ width: '100%' }} ref="txt" type="text" value=https://www.cnblogs.com/ygjzs/p/{this.state.msg} onChange={this.handleTextChange} />
// 這是文本框內容改變時候的處理函式
handleTextChange = () => {
this.setState({
msg: this.refs.txt.value
});
}
- 注意
setState的一個問題：
// 保存最新的state狀態值，在保存的時候，是異步地進行保存的，所以，如果想要獲取最新的，剛剛保存的那個狀態，需要通過回掉函式的形式去獲取最新state
this.setState({
msg: this.refs.txt.value
// msg: e.target.value
}, function () {
// 獲取最新的state狀態值
console.log(this.state.msg);
});
this問題和文本框
import React from 'react'
export default class BindThis extends React.Component {
constructor(props) {
super(props)
this.state = {
msg: '這是默認的msg'
}
// 系結 this 并傳參的方式2: 在建構式中系結并傳參
// 注意，當為一個函式，呼叫 bind 改變了this指向后，bind 函式呼叫的結果，有一個回傳值，這個值，就是被改變this指向后的函式的參考；
// 注意： bind 不會修改 原函式的 this 指向
this.changeMsg2 = this.changeMsg2.bind(this, '??', '??')
}
render() {
return <div>
<h1>系結This并傳參的幾種方式</h1>
{/* bind 的作用： 為前面的函式，修改函式內部的 this 指向，讓 函式內部的this，指向 bind 引數串列中的 第一個引數 */}
{/* bind 和 call/apply 之間的區別： */}
{/* call/apply 修改完this指向后，會立即呼叫前面的函式，但是 bind 只是修改this指向，并不會呼叫 */}
{/* 注意： bind 中的第一個引數，是用來修改 this 指向的，第一個引數后面的所有引數，都會當作將來呼叫 前面函式 時候的引數傳遞進去 */}
{/* 方式1：在 事件處理函式中，直接使用 bind 系結 this 并傳參 */}
<input type="button" value="https://www.cnblogs.com/ygjzs/p/系結this并傳參的方式1" onClick={this.changeMsg1.bind(this, '??', '??')} />
<input type="button" value="https://www.cnblogs.com/ygjzs/p/系結this并傳參的方式2" onClick={this.changeMsg2} />
{/* <input type="button" value="https://www.cnblogs.com/ygjzs/p/系結this并傳參的方式3" onClick={() => { this.changeMsg3('??', '??') }} /> */}
<input type="button" value="https://www.cnblogs.com/ygjzs/p/系結this并傳參的方式3" onClick={() => { this.changeMsg3('??', '??') }} />
<hr />
<h3>{this.state.msg}</h3>
{/* 在 Vue 中，有 v-model 指令來實作雙向資料系結，但是，在 React 中， 根本沒有指令的概念，因此React 默認也不支持 雙向資料系結 */}
{/* React 只支持，把資料從 state 上傳輸到 頁面，但是，無法自動實作資料從 頁面 傳輸到 state 中 進行保存，也就是，React 不支持資料的自動逆向傳輸， 只是實作了資料的單向系結 */}
{/* 注意：如果為 表單元素，提供了 value 屬性系結，那么，必須同時為 表單元素 系結 readOnly, 或者提供要給 onChange 事件 */}
{/* 如果提供了readOnly，表示這個元素只讀的不能被修改 */}
{/* 如果提供了onChange 表示，這個元素的值可以被修改，但是，要自己定義修改的邏輯 */}
<input type="text" style={{ width: '100%' }} value=https://www.cnblogs.com/ygjzs/p/{this.state.msg} onChange={this.txtChanged} ref="txt" />
</div>
}
// 為 文本框 系結 txtChanged 事件
txtChanged = (e) => {
// console.log('ok');
// 如果想讓 文本框在觸發 onChange 的時候，同時把文本框最新的值，保存到 state 中，那么，我們需要手動呼叫 this.setState
// 獲取文本框中 最新文本的3種方式：
// 1. 使用 document.getElementById 來拿
// 2. 使用 ref 來拿
// console.log(this.refs.txt.value);
// 3. 使用 事件物件的 引數 e 來拿 e.target 就表示觸發 這個事件的 事件源物件，得到的是一個原生的JS DOM 物件
// console.log(e.target.value);
this.setState({
msg: e.target.value
})
}
changeMsg1(arg1, arg2) {
// 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
// console.log(this);
this.setState({
msg: '系結this并傳參的方式1' + arg1 + arg2
})
}
changeMsg2(arg1, arg2) {
// console.log(this);
// 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
this.setState({
msg: '系結this并傳參的方式2' + arg1 + arg2
})
}
changeMsg3 = (arg1, arg2) => {
// console.log(this);
// 注意：這里的方式，是一個普通方法，因此，在觸發的時候，這里的 this 是 undefined
this.setState({
msg: '系結this并傳參的方式3' + arg1 + arg2
})
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/155331.html
標籤：JavaScript
上一篇：react-生命周期
下一篇：react-發表評論案例