为了账号安全,请及时绑定邮箱和手机立即绑定

findDOMNode提示not function

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
    <div id="example"></div>

    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>

    <script type="text/babel">
        var TestClickComponent = React.createClass({
            handleClick: function(event){
                var tipE = React.getDOMNode(this.refs.tip);
                if(tipE.style.display === 'none'){
                    tipE.style.display = 'inline';
                }
                else{
                    tipE.style.display = 'none';
                }
            },

            render: function(){
                return (
                    <div>
                        <button onClick={this.handleClick}>显示|隐藏</button>
                        <span ref="tip">测试点击</span>
                    </div>
                    )
            }
        });

        var TestInputComponent = React.createClass({
            getInitialState: function(){
                return {
                    inputContent: ''
                }
            },
            changeHandler: function(event){
                this.setState({
                    inputContent: event.target.value
                })

                event.stopPropagation();
                event.preventDefault();
            }
            ,
            render: function(){
                return (
                    <div>
                        <input type="text" onChange={this.changeHandler}/>
                        <span>{this.state.inputContent}</span>
                    </div>
                    )
            }
        });

        ReactDOM.render(
            <div>
                <TestClickComponent></TestClickComponent>
                <br />
                <TestInputComponent></TestInputComponent>
            </div>
            ,
            document.getElementById('example')
            )
    </script>
    </body>
</html>

问题如标题啊

正在回答

9 回答

return (

<div>

<button onClick={this.handleClick}>显示|隐藏</button><span style={{display:'none'}} ref="tip">测试点击</span>

</div>

);

在span标签给定style就不会了

0 回复 有任何疑惑可以回复我~

有没有在获取tipE.style.display的时候,display是undefined的情况!!!

0 回复 有任何疑惑可以回复我~

15版本以后,

先 import ReactDOM from 'react-dom';

然后 ReactDOM.findDOMNode(this.refs.tip);

3 回复 有任何疑惑可以回复我~

你先看看你Reac.min.js是什么版本的,15版本以后用ReactDOM.findDOMNode(this.refs.xx)

0 回复 有任何疑惑可以回复我~

0.14.8版本及以前用 this.getDOMNode() 或者 this.findDOMNode(this.refs.tip)

15.0版本后用 ReactDOM.findDOMNode(this.refs.tip);

6 回复 有任何疑惑可以回复我~

版本问题,0.14以后已经将React拆分了两个库 react 和 react-dom 而getDOMNode改为react-dom中的findDOMNode,所以如果你上面的代码是引用了最新版本的这两个库,那么想使用find...的话需要ReactDOM.findDOMNode()

1 回复 有任何疑惑可以回复我~
#1

Groot1

以解决
2016-07-28 回复 有任何疑惑可以回复我~
#2

Nicole_0023 回复 Groot1

怎么解决的呢 引用最新的库
2016-08-18 回复 有任何疑惑可以回复我~
#3

Nicole_0023

为什么我使用 var relE=ReactDOM.findDOMNode(this.refs.test); <span ref="test">测试文本显示与隐藏</span> 还是报错呢
2016-08-18 回复 有任何疑惑可以回复我~
#4

qq_木槿兮兮_0 回复 Groot1

请问 你是怎么解决的 谢谢 我也遇到这样的问题
2016-08-18 回复 有任何疑惑可以回复我~
#5

qq_木槿兮兮_0

还是没有用呀
2016-08-18 回复 有任何疑惑可以回复我~
#6

L_Y_R 回复 qq_木槿兮兮_0

直接用this.refs.test 就可以获取到了
2016-09-12 回复 有任何疑惑可以回复我~
#7

AngelaDaddy 回复 Nicole_0023

import ReactDOM,{findDOMNode} from 'react-dom';
2016-11-13 回复 有任何疑惑可以回复我~
#8

AngelaDaddy 回复 Nicole_0023

import ReactDOM,{findDOMNode} from 'react-dom';
2016-11-13 回复 有任何疑惑可以回复我~
查看5条回复

1.引用老师的库试试

    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/JSXTransformer.js"></script>

2.将ReactDOM换成React。

是版本兼容问题,望采纳!


1 回复 有任何疑惑可以回复我~
#1

yusine

对了,还要将<script type="text/label">换成<script type="text/jsx">
2016-07-05 回复 有任何疑惑可以回复我~

var tipE = React.findDOMNode(this.refs.tip);

改成这样,get是获取,find是查找

0 回复 有任何疑惑可以回复我~
#1

ydsu416 提问者

两个我都试了,都不行
2016-06-29 回复 有任何疑惑可以回复我~

var tipE = React.getDOMNodes(this.refs.tip);

在Node后面加个s试试

0 回复 有任何疑惑可以回复我~
#1

ydsu416 提问者

findDOMNode()/getDOMNode() findDOMNodes()/getDOMNodes() 我都试了不行啊
2016-06-29 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
React入门
  • 参与学习       122208    人
  • 解答问题       121    个

颠覆式前端UI开发框架React入门视频教程,赶紧学起来

进入课程

findDOMNode提示not function

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信