React應用程序中渲染功能中的Javascript嗅探錯誤-預期為“}”

Question

我正在寫一個簡單的反應代碼，其中包含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;

'document.write（“ Hi”）'語句運行完美。 但是即使我只是寫“ var inp;” 沒別的..我開始收到類似“}預期”的錯誤！

我不明白這是哪里出了問題...我正在關注此鏈接： https : //www.w3schools.com/howto/howto_js_filter_lists.asp，以供學習。

編輯：按要求將我的代碼粘貼為ref .. :)如果我刪除腳本標簽，則代碼可以正常運行...但是我正嘗試根據搜索輸入在此處過濾li標簽。。在此先感謝您！

Answer 1

感謝您的幫助，但我在這里得到了答復。 由於某種原因，我不確定在任何react函數的return語句中定義腳本標記時是否起作用。 因此，我創建了另一個函數來執行過濾，並在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>
    );
}

其余代碼僅用於顯示我在OpenReport組件中定義的列表標記。

希望這對別人有幫助！

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