<react學習筆記(7)>操作DOM節點，元件傳參

1. 操作DOM節點的方式

初始的效果圖：

1.通過js的ID值獲取DOM

class Element extends React.Component{
    handleClick(){
        // 通過js id 獲取DOM
        const ipt = document.querySelector('input');
        ipt.style.background = 'hotpink';
    }
    render() {
        return (
            <div>
                <input 
                    type = "button"
                    defaultValue = "操作DOM" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app')
);
複製程式碼

點選後效果圖:

2.通過事件物件e獲取DOM

class Element extends React.Component{
    handleClick(e){
        // 2. 事件物件
        const {target} = e;
        console.log(target);
        target.style.background = 'skyblue';
    }
    render() {
        return (
            <div>
                <input 
                    type = "button"
                    defaultValue = "操作DOM" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app')
);
複製程式碼

點選後效果圖:

3. 通過 ref 屬性操作DOM

class Element extends React.Component{
    handleClick(){
        // 3. 通過 ref 屬性操作Dom
        console.log( this );
        console.log( this.refs );
        console.log( this.refs.ipt );
        this.refs.ipt.style.background = 'yellow';
    }
    render() {
        return (
            <div>
                <input 
                    ref = {"ipt"}
                    type = "button"
                    defaultValue = "操作DOM" 
                    onClick = {this.handleClick.bind(this)}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app')
);
複製程式碼

ref屬性的值最好寫成回撥函式的形式： ref={itemDiv=>this._div=itemDiv}

點選後效果圖:

4. 通過 ReactDOM.findDOMNode 屬性操作DOM

class Element extends React.Component{
    handleClick(){
        // 4. findDOMNode
        const ipt = document.querySelector('input');
        ReactDOM.findDOMNode(ipt).style.background = 'purple';
    }
    render() {
        return (
            <div>
                <input 
                    ref = {"ipt"}
                    type = "button"
                    defaultValue = "操作DOM" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app')
);
複製程式碼

點選後效果圖:

注:在使用 ReactDOM.findDOMNode時，當引數是DOM時，返回值是此DOM；
當引數是Component時，獲取的就是Component的render中dom。

---

2.元件傳參

元件兩個重要概念: state,props
state(狀態)：負責使用者介面
props(屬性)：元件傳值通訊

demo

//List子元件
class List extends React.Component{
    render() {
        console.log( this.props );
        return (
            <div>
                <h2>{this.props.abc}</h2>
                <h2>{this.props.data}</h2>
                {
                    // 子元件去呼叫父元件的方法
                    // 子元件向父元件通訊
                }
                <button onClick={this.props.fn.bind(this,'傳參')}>事件按鈕1</button>
                <button onClick={()=>{this.props.fn('傳參123')}}>事件按鈕2</button>
            </div>
        );
    }
};
//Element父元件
class Element extends React.Component{
    state = {
        data: '父元件的資料'
    }
    getData(xyz){
        console.log('getData函式',xyz)
    }
    render() {
        return (
            <div>
                <h1> 元件 </h1>
                <List
                    abc={'list'}
                    data={this.state.data}
                    fn={this.getData}
                ></List>
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app')
);
複製程式碼

效果圖：