React.findDOMNode 未定义

Question

我有

<div id="wrapper"></div>

<script type="text/jsx">
/* @jsx React.DOM*/
var Login = React.createClass({
    Validate: function(){
        debugger;
        var username = React.findDOMNode(this.refs.username).trim();
        var password = React.findDOMNode(this.refs.password).trim();
        console.log('Username: ' + username + '\nPassword: ' + password);
        if(username == 'username' && password == 'password'){
            alert('Success');
        }
        else{
           alert('Failure');
        }
    },
    Clear: function(){

    },
    render: function(){
        return(
            <div className="container">
                Login 
                <p></p>
                Username: <input type="text" ref="username" /><br />
                Password: <input type="password" ref="password" /><br /><br />
                <input type="button" value="Submit" onClick={this.Validate} />&nbsp;&nbsp;
                <input type="button" value="Clear" onClick={this.Clear} />
            </div>
        );
    }
});

React.render(<Login />, document.getElementById('wrapper'))
</script>

Answer 1

React.findDOMNode 是在 React v0.13 中引入的，因此请确保您至少使用 v0.13。

Answer 2

在 React v0.13 中使用 React.findDOMNode()。

在早期版本中，例如v0.12 你可以使用 component.getDOMNode()

this.refs.myRef.getDOMNode();

为了支持未来基于 ES6 的模式，React 团队添加了 React.findDOMNode(component) 来代替 component.getDOMNode()。

Answer 3

不确定它是什么时候发生的，但它现在似乎存在于 ReactDOM 中 ReactDOM.findDOMNode。

见https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode。

Answer 4

这可能与上述问题中提到的代码不太相关，但是来自 React 文档的其他一些检查是：

"When render returns null or false, findDOMNode returns null."
"findDOMNode cannot be used on functional components."

希望这对有需要的人有所帮助。

Answer 5

React.findDOMNode

已弃用，请使用

ReactDOM.findDOMNode

在 React 15.1 及更高版本中

React.findDOMNode 未定义

React.findDOMNode comes as undefined

javascript

jquery

reactjs