的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在渲染功能错误的反应的应用 - “}”预计

回答

相关问题