知識點回顧(2)事件綁定及傳參，組件，屬性和狀態，表單元素

時間 2019-12-09

標籤知識回顧事件綁定組件屬性狀態表單元素欄目 HTML 简体版

原文原文鏈接

1.知識點回顧(2)

1.事件綁定

demohtml

//點擊執行的函數
function handleClick() {
    console.log('handleKeyDown')
};
//鍵盤按下的函數
function handleKeyDown() {
    console.log('handleKeyDown')
};
const element1 = (
    <div>
        <input
            type="button"
            value="自執行"
            onClick={alert('自執行')}
        />
        <br />
        <input
            type="button"
            value="箭頭函數"
            onClick={()=>{alert('箭頭函數')}}
        />
        <br />
        <input
            type="button"
            value="事件調用函數"
            onClick={ handleClick}
        />
        <br />
        <input type="text" defaultValue="keydown" onKeyDown={handleKeyDown}/>
    </div>
);
ReactDOM.render(
    element1,
    document.querySelector('#app')
);
複製代碼

打開網頁會先自動彈出alert彈窗;點擊箭頭函數，彈出alert彈窗
效果圖：後端

2.傳參，使用bind

回顧：call和bind：call會自執行;bind不會
bind(this指向,參數)數組

// 函數 的[最後]一個參數 是 事件對象event
function handleClick(data,e) {
    console.log('handleClick');
    console.log(data);
    console.log(e);
    console.log(e.target);
};
const element2 = (
    <div>
        <input
            type="button"
            value="事件調用函數"
            onClick={ handleClick.bind(this,'這纔是傳參') }
        />
    </div>
);
ReactDOM.render(
    element2,
    document.querySelector('#app')
)
複製代碼

效果圖： bash

3.組件

以上例子中的element都只是一個普通變量，是沒有狀態的。
區別是不是組件，也就是看有狀態或者無狀態。
狀態: 讓數據驅動視圖的響應式數據。
這些數據存放在一個地方，方便於管理 state = {}，例如：state = {arr:[],title:''}app

1.聲明式無狀態組件

聲明一個有名的函數組件，此時也只是一個無狀態的組件函數

function Head(){
    return (
        <header> 這是頁面頭部 </header>
    )
};
function Main(){
    return (
        <main> 這是頁面主體內容 </main>
    )
};
function Foot(){
    return (
        <footer> 這是頁面底部 </footer>
    )
};
let element = (
    <div>
        <Head></Head>
        <Main></Main>
        <Foot></Foot>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
複製代碼

效果圖：ui

2.聲明式有狀態組件

用class聲明,extends繼承React中的Component組件this

// 有狀態的組件
// 定義 Head組件 繼承自 React的 component組件
// 那麼 就能夠去調用 React的 component組件所提供的 方法或屬性
class Head extends React.Component {
    constructor(){
        super();  // 執行父類的構造函數
        this.name = 'sjl';
        this.age = 18;
    }
    // 不要寫function
    say(){
        console.log('say方法');
    }
    render(){ // 渲染
        return (
            <header> 這是真正的有狀態的組件 頭部 </header>
        )
    }
};
let element = (
    <div>
        <Head></Head>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
複製代碼

3.組件傳值

demospa

class Head extends React.Component {
    constructor(){
        // 若是 不在 constructor構造裏面 用實例對象上的props （this.props）那麼能夠不用傳參
        super(...arguments);  // 執行父類的構造函數,接收參數
        this.name = 'sjl';
        this.age = 18;

        // 對象裏面的數據 是從後端返回的
        // state是負責當前組件（Head）的用戶界面
        // 若是 state裏面的數據 發生改變 視圖就會自動更新 -> 響應式數據
        
        this.state = {
            abc: this.props.text
        }; //接受<Head></Head>中的text
    }
    render(){ // 渲染
        return (
            <div>
                <header> 
                    { this.state.abc && this.state.abc }
                </header>
            </div>
        )
    }
};
let element = (
    <div>
        <Head text='這是真正的有狀態的組件 頭部'></Head>
    </div>
);

ReactDOM.render(
    element,
    document.querySelector('#app')
);
複製代碼

效果圖：3d

4.setState()

setState()方法能夠改變數據

class Head extends React.Component {
    constructor(){
        super(...arguments); 
        this.name = 'sjl';
        this.age = 18;
        
        this.state = {
            abc: this.props.text
        }; 
    }
    handleClick1(data, e){
        console.log(this);
        console.log(data);
        console.log(e);
        this.setState({
            abc: '從新賦值'
        })
    }
    handleClick2(data, e){
        console.log(e);
        console.log(data);
    }
    render(){ 
        return (
            <div>
                {
                    //第一種寫法
                }
                <header onClick={this.handleClick1.bind(this,"傳來的數據")}> 
                    { this.state.abc && this.state.abc }
                </header>
                {
                    //第二種寫法
                    //箭頭函數中的this指向父級做用於，也就是Head實例
                }
                <header onClick={(e) => {this.handleClick2("第二種", e)}}> 
                    { this.state.abc && this.state.abc }
                </header>
            </div>
        )
    }
};
let element = (
    <div>
        <Head text='這是真正的有狀態的組件 頭部'></Head>
    </div>
);

ReactDOM.render(
    element,
    document.querySelector('#app')
);
複製代碼

點擊第一種的效果圖：

點擊第二種的效果圖：

5.表單元素注意點

input單標籤須要閉合
label標籤中的for屬性,在React中須要用htmlFor代替

const element = (
    <div>
        <input id={'txt'} type="text" />
        <label htmlFor="txt"></label>
    </div>
);
ReactDOM.render(
    element,
    document.querySelector('#app')
);
複製代碼