React 父组件如何获取子组件的ref值？

Question

React 父组件如何获取子组件的ref值？
父组件：

const registerStepTwo = React.createClass({
    handleChange:function(){
        var confirmPassText =  this.refs.confirmPassText.value;
        console.log(confirmPassText)//子组件ref的值取不到
    },
    render(){
        return(
            <div>
                {navBar}
                <div className="list-ul">
                    <ul>
                        <ConfirmPass  ref="confirmPassText" onChange={this.props.handleChange}  />
                    </ul>
                </div>
            </div>
        )
    }
})

子组件：

   const ConfirmPass = React.createClass({
        render(){       
            return(
                <div>
                    <li>
                        <div className="registerLeft">
                        <input ref="confirmPassText" type="password"  onChange={this.handleChange}   className="loginText" />
                        </div>
                    </li>
                </div>
            )
        }
    })
    
    
    

Answer 1

this.props.handleChange改成this.handleChange。

handleChange是你这个组件的函数，不是传进来的属性。

Answer 2

你的handleChange没有绑定作用域在父组件，放你在子组件执行时作用域在子组件当然取不到。

Answer 3

const registerStepTwo = React.createClass({
    handleChange:function(text){
        console.log(text)   //子组件的内容 让子组件自己 传过来
    },
    render(){
        return(
            <div>
                {navBar}
                <div className="list-ul">
                    <ul>
                        <ConfirmPass onChange={this.handleChange}  />       // 这个不应该是 this.props.handleChange, 而是 this.handleChange
                    </ul>
                </div>
            </div>
        )
    }
})

------ 子组件 ------

 const ConfirmPass = React.createClass({
    handleChg: function() {
        this.props.handleChange(this.refs.confirmPassText.value);
    },
    render(){       
        return(
            <div>
                <li>
                    <div className="registerLeft">
                    <input ref="confirmPassText" type="password"  onChange={this.handleChg}   className="loginText" />
                    </div>
                </li>
            </div>
        )
    }
})

Answer 4

这里子组件应该是handleChg: function() {

    this.propsonChange(this.ref.confirmPassText.value);
},

Answer 5

react初衷不推荐这么做，真要这么做也是可以的，可以使用this.refs.confirmPassText.refs.confirmPassText获取子组件的ref