getDOMNode is not a function?

monsterzzz
  • 131
var React = require('react')

module.exports = React.createClass({
    getInitialState : function () {
        return {
            value : this.props.value
        }
    },
    handleChange : function (e) {
        this.setState({
            value : this.refs.mytextArea.getDOMNode().value
        })
        console.log(this.state.value)
        console.log()
    },
    render : function () {
        return (
                <div className="col-sm-5 col-sm-offset-1">
                    <textarea ref='mytextArea' className="form-control" rows="27" style= {{resize: "none"}} defaultValue={this.state.value} onChange={this.handleChange}></textarea>
                </div>
        )
    }
})

并且我使用这个getDOMNode()提示出错,直接使用this.refs.mytextArea.value就可以成功获得值,但是获得的是change之前的值。
我想获得我改变之后的值,但是我handleChange的console.log输出的是change之前的值,为什么呢?

回复
阅读 6.3k
3 个回答
✓ 已被采纳

首先,getDOMNode 是 ReactDOM 的方法。

然后,应该用e.target.value去拿值。

楼上的是正解,getDomNode的却是ReactDom的方法,你可以用
const textarea = ReactDOM.findDOMNode(this.refs.textarea);

其次是e.target.value才能获取到更改过后的value值。
当你console.log(this.state.value)state是之前的值,这个是react官网说的很清楚的,是异步的。
所以你应该着么去写

this.setState({
    value : e.target.value
})

组件上写的应该是value={this.state.value}
这样就应该可以了

_猛德_
  • 1
新手上路,请多包涵

也可以使用:
this.setState({

        value : this.refs.mytextArea.value
    })
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏