的Javascript snipet在渲染功能錯誤的反應的應用 - 「}」預計

我寫一個簡單的反應有其扔我一個錯誤的Javascript snipet在渲染功能錯誤的反應的應用 - 「}」預計

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;

的「文件撰寫的JavaScript的某一部分代碼（「Hi」）聲明完美無缺。但即使我只寫'var inp;'並沒有別的..我開始得到一個像'}預期'的錯誤！

我不明白這是怎麼回事......我正在關注此鏈接：https://www.w3schools.com/howto/howto_js_filter_lists.asp這個學習。

編輯：粘貼我的代碼作爲ref如問:)如果我刪除腳本標記，然後代碼運行良好...但我試圖根據搜索輸入過濾li標記.. Thanking你提前！

來源

2017-06-20 user3868051

記住在縮進代碼時要遵守紀律！ – evolutionxbox

你可以發佈整個文件的代碼嗎？在我看來，這個錯誤不在這個片段中。 – Grandas

你可以添加給出錯誤的代碼嗎？ – evolutionxbox

請分析代碼示例。我只提出需要的東西。

片段測試：

document.getElementById("myInput").addEventListener('keyup', myFunction , false); 
 

 

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

 
    
 

 

 
         for (i = 0; i < li.length; i++) 
 
         { 
 
          
 
          var a = li[i].getElementsByTagName("a")[0]; 
 
          
 
          if (a.innerHTML.toUpperCase().indexOf(filter) != -1) 
 
          { 
 
           li[i].style.display = "block"; 
 
          } 
 
          else 
 
          { 
 
           li[i].style.display = "none"; 
 
          } 
 
         } 
 
        }

<input id="myInput" type="text" style="display:block" value="" /> 
 

 
<ul id="myUL"> 
 

 
<li style="display:none" >I am visible my id = <a href="javascript:void(0)" >1</a></li> 
 
<li style="display:none" >I am visible my id = <a href="javascript:void(0)" >2</a></li> 
 
<li style="display:none" >I am visible my id = <a href="javascript:void(0)" >3</a></li> 
 

 
</ul>

來源

2017-06-20 11:41:24

感謝你的幫助，但我得到了一個答案在這裏。出於某種原因，我不確定腳本標記在任何反應函數的return語句內定義時不起作用。因此，我創建另一個函數來執行過濾和調用如下所述渲染功能的相同：

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部件已經定義了列表標記。

希望這可以幫助別人！

來源

2017-06-21 03:56:18 user3868051

的Javascript snipet在渲染功能錯誤的反應的應用 - 「}」預計

回答

相關問題