react ref的多种用法

ref绑在子组件上有两种写法,功能父组件可以调用子组件的方法。

1.ref的值为字符串的时候

login为父组件

import React from 'react'

import Some from '../test/index';
const FormItem = Form.Item;

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            
        }
    }
    componentDidMount(){
       console.log('this.son',this.refs.some.some());//父组件可以调用子组件的方法
    }
    

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="loginWrap">
                <Some  ref='some'></Some>
            </div>
        );
    }
}

const Warplogin = Form.create()(Login);
export default Warplogin

index为子组件

import React from 'react';

export default class some extends React.Component{
    constructor(props){
        super(props)
        console.log('some',this.props.some);
    }
    some=()=>{子组件的方法
        alert()
    }
    render(){
        return(
            <div onClick={this.some}>
                123
            </div>
        )
    }
}

2.ref的值为函数的时候

login父组件

import React from 'react'

import Some from '../test/index';
const FormItem = Form.Item;

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            
        }
    }
    componentDidMount(){
       console.log('this.son',this.son.some());//父组件可以调用子组件的方法
    }
    

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="loginWrap">
                <Some  ref={(el)=>this.son=el}></Some>
            </div>
        );
    }
}

const Warplogin = Form.create()(Login);
export default Warplogin

index为子组件

import React from 'react';

export default class some extends React.Component{
    constructor(props){
        super(props)
        console.log('some',this.props.some);
    }
    some=()=>{//子组件的方法
        alert()
    }
    render(){
        return(
            <div onClick={this.some}>
                123
            </div>
        )
    }
}

ref绑在标签元素上,功能可以拿到元素的dom结构。

import React from 'react'

const FormItem = Form.Item;

class Login extends React.Component {
    constructor() {
        super()
        this.state = {
            
        }
    }
    componentDidMount(){
       console.log('this.son',this.refs.some);//拿到p标签的dom元素
    }
    

    render() {
        const {getFieldDecorator} = this.props.form;
        return (
            <div className="loginWrap">
                <p ref='some'>qwexad123123</p>
            </div>
        );
    }
}

const Warplogin = Form.create()(Login);
export default Warplogin