[英]Javascript snipet error in render function in a react application - '}' expected
我正在写一个简单的反应代码,其中包含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标签。。在此先感谢您!
感谢您的帮助,但我在这里得到了答复。 由于某种原因,我不确定在任何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组件中定义的列表标记。
希望这对别人有帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.