1. How to manipulate DOM nodes

Initial renderings:

1. Obtain the DOM from the JS ID value

class Element extends React.Component{
    handleClickConst ipt = document.querySelector(){// Get DOM const ipt = document.querySelector('input');
        ipt.style.background = 'hotpink';
    }
    render() {
        return (
            <div>
                <input 
                    type = "button"
                    defaultValue = "The DOM operation" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app'));Copy the code

Effect picture after click:

2. Obtain the DOM from the event object E

class Element extends React.Component{ handleClick(e){ // 2. Event object const {target} = e; console.log(target); target.style.background ='skyblue';
    }
    render() {
        return (
            <div>
                <input 
                    type = "button"
                    defaultValue = "The DOM operation" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app'));Copy the code

Effect picture after click:

3. Manipulate the DOM through the ref attribute

class Element extends React.Component{
    handleClick(){// 3. Manipulate Dom console.log(this) with the ref attribute; console.log( this.refs ); console.log( this.refs.ipt ); this.refs.ipt.style.background ='yellow';
    }
    render() {
        return (
            <div>
                <input 
                    ref = {"ipt"}
                    type = "button"
                    defaultValue = "The DOM operation" 
                    onClick = {this.handleClick.bind(this)}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app'));Copy the code

The value of the ref attribute is best written as a callback function: ref={itemDiv=>this._div=itemDiv}

Effect picture after click:

4. Use the reactdom.findDomNode property to manipulate the 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 = "The DOM operation" 
                    onClick = {this.handleClick}
                />
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app'));Copy the code

Effect picture after click:

Note: When reactdom.findDomNode is used, the DOM is returned when the argument is DOM; When the argument is Component, we get the DOM in the Render of Component.

2. Component parameter transfer

Components have two important concepts: props state: functions of the user interface props: component value communication

demo

Class List extends React.Component{render() {
        console.log( this.props );
        return(<div> <h2>{this.props. ABC}</h2> <h2>{this.props. Data}</h2> {// the child is calling the parent // the child is talking to the parent}< button onClick={this.props.fn.bind(this,'and' transferButton 1)} > events < / button > < button onClick = {() = > {this. Props. Fn ('the 123 refs'</button> </div>); }}; Class Element extends React.Component{state = {data:'Parent component data'
    }
    getData(xyz){
        console.log('the getData function',xyz)
    }
    render() {
        return<div> <h1> Component </h1> <List ABC ={'list'}
                    data={this.state.data}
                    fn={this.getData}
                ></List>
            </div>
        )
    }
};
ReactDOM.render(
    <Element />,
    document.querySelector('#app'));Copy the code

Effect: