javascript - React真实dom获取方法

问题描述

问 题

网上有说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啊 ，控制台也不报错，不知道哪里错了啊

解决方案

你在render的时候应该是取不到的把 试着在componentDidUpdate 或者componentDidMount里面取

---

var WrapBox = React.createClass({
    getInitialState:function(){
        return{
            data:[]
        }
    },
    changeData:function(tmp){
        this.setState({
            data:tmp
        })
    },
    render:function(){
        return(
            <div>
                <InputandButtom changeData={this.changeData} data={this.state.data}/>
                <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.changeData(addIndate)
        
    },
    ...
})

这篇关于javascript - React真实dom获取方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！