javascript - React 父组件如何获取子组件的ref值?
黄舟
黄舟 2017-04-11 12:48:51
[JavaScript讨论组]

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

const registerStepTwo = React.createClass({
    handleChange:function(){
        var confirmPassText =  this.refs.confirmPassText.value;
        console.log(confirmPassText)//子组件ref的值取不到
    },
    render(){
        return(
            

{navBar}

) } })

子组件:

   const ConfirmPass = React.createClass({
        render(){       
            return(
                

  • ) } })
    黄舟
    黄舟

    人生最曼妙的风景,竟是内心的淡定与从容!

    全部回复(4)
    怪我咯

    this.props.handleChange改成this.handleChange。

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

    PHP中文网

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

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

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

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

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

    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板
    关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
    php中文网:公益在线php培训,帮助PHP学习者快速成长!
    关注服务号 技术交流群
    PHP中文网订阅号
    每天精选资源文章推送
    PHP中文网APP
    随时随地碎片化学习

    Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号