账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    React真实dom获取方法
    • 2017-08-23 00:00
    • 11
    16
    0

    网上有说ReactDOM.findDOMNode() 还有 this.refs.xxxxx

    render:function(){
            var addTextDOM = this.refs.inputext.innerTexet
            // var addText = addTextDOM.value
            console.log(addTextDOM)
            return(
                <form>
                    <input type="text" ref="inputext" value=""/>
                    <button onClick={this.addData}>save</button>
                </form>
            )
        }
    })

    为什么我这里获取不到呢

    var WrapBox = React.createClass({
        getInitialState:function(){
            return{
                data:[]
            }
        },
        changeWhenAdd:function(addIn){
            this.setState({
                data:addIn
            })
        },
        render:function(){
            return(
                <div>
                    <InputandButtom data={this.state.data} callback={this.changeWhenAdd}/>
                    <ListDisplay data={this.state.data} />
                </div>
            )
        }
    })
    var InputandButtom = React.createClass({
        addData:function(){
            var addText = this.refs.inputext.value
            console.log(addText)
            var addIndate = this.props.data
            addIndate.push({
                text:addText,
                key:Date.now()
            })
            this.props.callback(addIndate);
    
        },
        render:function(){
            return(
                <form>
                    <input type="text" ref="inputext" />
                    <button onClick={this.addData.bind(this)}>save</button>
                </form>
            )
        }
    })
    var ListDisplay = React.createClass({
        render:function(){
            var addData = this.props.data
            function createList(data){
                return <li key={data.key}>{data.text}</li>
            }
            var dataListdone = addData.map(createList)
            return (
                <ul>
                    {dataListdone}
                </ul>
            )
        }
    })
    ReactDOM.render(
        <WrapBox />,
        document.getElementById('example')
    )

    触发点击按钮后页面会重绘,但是不触发addData:function中的console.log啊 ,控制台也不报错,不知道哪里错了啊

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部