React应用程序中渲染功能中的Javascript嗅探错误-预期为“}”

Question

I am writing a simple react code that has a certain portion of javascript which is throwing me an error 我正在写一个简单的反应代码，其中包含JavaScript的某些部分，这使我出错

var React = require('react');
var Link = require('react-router').Link;

var openColumnAnalysis = React.createClass({

  render: function(){
        return(
            <body>
                <div>
                    <Link to={"/"}>Reports Home</Link>
                    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for Reports.."></input>
                    <ul id="myUL">
                          <li>
                                <a href="myLink" target="_blank">Map Report</a>
                          </li>
                          <li>
                                <a href="myLink" target="_blank">Customer Report</a>
                          </li>
                    </ul>

                </div>
                <script>
                    function myFunction()
                    {
                        // document.write("Hi")
                        filter = document.getElementById('myInput').value
                        li_tag = document.getElementById('myUL').getElementsByTagName('li')

                        for (i = 0; i < li_tag.length; i++)
                        {
                            a_tag = li_tag[i].getElementsByTagName('a')[0];
                            if (a_tag.innerHTML.toUpperCase().indexOf(filter) > -1)
                            {
                                li_tag[i].style.display = "";
                            }
                            else
                            {
                                li_tag[i].style.display = "none";
                            }
                        }
                    }

                </script>
            </body>
        );
  }
  });
module.exports = openColumnAnalysis;

the 'document.write("Hi")' statement works perfectly. 'document.write（“ Hi”）'语句运行完美。 But even if I just write 'var inp;' 但是即使我只是写“ var inp;” and nothing else.. I start getting an error like '} expected'! 没别的..我开始收到类似“}预期”的错误！

I don't understand where this is going wrong... I am following this link : https://www.w3schools.com/howto/howto_js_filter_lists.asp for this learning. 我不明白这是哪里出了问题...我正在关注此链接： https : //www.w3schools.com/howto/howto_js_filter_lists.asp，以供学习。

Edit: Pasting my code as ref as asked.. :) If I remove the script tag, then the code runs fine... but I am trying to filter the li tags here based on search input.. Thanking you in advance! 编辑：按要求将我的代码粘贴为ref .. :)如果我删除脚本标签，则代码可以正常运行...但是我正尝试根据搜索输入在此处过滤li标签。。在此先感谢您！

Answer 1

Thank you for your help, but I got an answer here. 感谢您的帮助，但我在这里得到了答复。 For some reason I am not sure script tags are not working when defined inside the return statement of any react function. 由于某种原因，我不确定在任何react函数的return语句中定义脚本标记时是否起作用。 So I created another function to perform the filtering and called the same in the render function as below: 因此，我创建了另一个函数来执行过滤，并在render函数中调用了以下函数：

filterRepo: function(){
    return(
        function myFunction() {
            var filter = document.getElementById('myInput').value.toUpperCase();
            var li = document.getElementById("myUL").getElementsByTagName('li');

            // Loop through all list items, and hide those who don't match the search query
            for (i = 0; i < li.length; i++) {
                a = li[i].getElementsByTagName("a")[0];
                if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    li[i].style.display = "";
                } else {
                    li[i].style.display = "none";
                }
            }
        }
    );

},
render: function(){
    var repoLink = this.state.repoLinks;
    repoLink = repoLink.map(function(item, index){
        return(
            <OpenReport key={index} desc={item.description} ); 
    }.bind(this));

    return(
        <div id="inside_repoInfo">
            <br></br>
            <input type="text" id="myInput" onKeyUp={this.filterRepo()} placeholder="Search for Report.."></input>
            <ul id="myUL" >{repoLink}</ul>
        </div>
    );
}

The rest of the code if only to display the list tag which I have defined in OpenReport component. 其余代码仅用于显示我在OpenReport组件中定义的列表标记。

Hope this helps others! 希望这对别人有帮助！

React应用程序中渲染功能中的Javascript嗅探错误-预期为“}”

问题描述

1 个解决方案

解决方案1
0 2017-06-21 03:56:18

React应用程序中渲染功能中的Javascript嗅探错误-预期为“}”

问题描述

1 个解决方案

解决方案1 0 2017-06-21 03:56:18

解决方案1
0 2017-06-21 03:56:18