使用onClick函数传递id React
我遇到了将id传递给handleClick函数和console.log并将其传入控制台的问题。 我尝试了一些简单的例子，但我无法理解为什么它在我的实现中不起作用。
以下是工作示例的代码：
var obiekt = [{"Zdjecie":"http://i.imgur.com/A83qNiV.jpg"},{"Zdjecie":"http://i.imgur.com/wwOoOIc.png"}];
class NavbarList extends React.Component {
constructor() {
super();
this.state = {
text: "Old Text",
id: 0,
isPasswordPage : false,
isUsernamePage : true
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
this.setState({
text: "New text",
id: event.target.id,
isPasswordPage : true,
isUsernamePage : false
});
}
passwordpage(){
return(
<div className="mainapp">
<h2>{this.state.id}</h2>
<div>
{obiekt.map((obj, index) =>{
if(index == this.state.id) return (
<div key = {index}>
<img src= {obj.Zdjecie} alt="" key = {index}></img>
</div>
)
})}
</div>
</div>
);
};
render() {
var usernameComp = (
<form>
<div className="mainapp">
<div>
{obiekt.map((obj, index) =>
<div onClick={this.handleClick} id={index} key={index}>Next</div>
)}
</div>
</div>
</form>
);
return (
<div>
{ this.state.isUsernamePage ? usernameComp : null }
{ this.state.isPasswordPage ? this.passwordpage() : null }
</div>
);
}
}
ReactDOM.render(
<NavbarList />,
document.getElementById('root')
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>
这是我的代码：
<div id="root"></div>
<script type="text/babel">
const navbarValue = [{"Category":"Home"},{"Category":"Sport"},{"Category":"Technologia"}];
var obiekt = [{"Zdjecie":"http://i.imgur.com/A83qNiV.jpg"},{"Zdjecie":"http://i.imgur.com/wwOoOIc.png"}];
class Strona extends React.Component {
constructor() {
super();
this.state = {
id: 0,
isArticleListPage : true,
isArticlePage : false
};
this.handleClick = this.handleClick.bind(this);
}
handleClick(event) {
const {id} = event.target;
console.log(id);
this.setState({
id: event.target.id,
isArticleListPage : false,
isArticlePage : true
});
}
articlepage(){
return(
<div>
<div className="navbar-wrapper">
<div className="container">
<nav className="navbar navbar-fixed-static-top navbar-inverse">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="">Back</a>
</div>
<div id="navbar" className="collapse navbar-collapse">
<ul className="nav navbar-nav">
{navbarValue.map((obj, index) => {
if (index == this.state.id)
return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li>
return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li>
})}
</ul>
</div>
</div>
</nav>
</div>
</div>
<div className="container">
<div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="3000">
<div className="carousel-inner" role="listbox">
<div className="item active">
{obiekt.map((obj, index) =>{
if(index == this.state.id) return <img src= {obj.Zdjecie} alt="" key= {index}/>
})}
<div className="container">
<div className="carousel-caption">
<h1>One more for good measure.</h1>
<p className="lead">Less.</p>
<a className="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
};
render() {
var articlelistpage = (
<div>
<div className="navbar-wrapper">
<div className="container">
<nav className="navbar navbar-fixed-static-top navbar-inverse">
<div className="container">
<div className="navbar-header">
<button type="button" className="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">BrandName</a>
</div>
<div id="navbar" className="collapse navbar-collapse">
<ul className="nav navbar-nav">
{navbarValue.map((obj, index) => {
if (index ==this.state.id)
return <li className="active" key={index}><a id={index} onClick={this.onClick}>{obj.Category}</a></li>
return <li key={index}><a id={index} onClick={this.onClick}>{obj.Category} </a></li>
})}
</ul>
</div>
</div>
</nav>
</div>
</div>
<div className="container">
<div id="carousel-example-generic" className="carousel slide" data-ride="carousel" data-interval="3000">
<div className="carousel-inner" role="listbox">
{obiekt.map((obj, index) => {
if (!index) return (
<div className="item active" key={index}>
<img src={obj.Zdjecie} alt=""/>
<div className="container">
<div className="carousel-caption">
<h1>One more for good measure.</h1>
<p className="lead">Less.</p>
<a className="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
)
else return(
<div className="item" key={index}>
<img src={obj.Zdjecie} alt=""/>
<div className="container">
<div className="carousel-caption">
<h1>One more for good measure.</h1>
<p className="lead">Less.</p>
<a className="btn btn-large btn-primary" href="#">Browse gallery</a>
</div>
</div>
</div>
)
})}
</div>
<a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span className="sr-only">Previous</span>
</a>
<a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span className="sr-only">Next</span>
</a>
</div>
</div>
<div className="container marketing">
{obiekt.map((obj, index) =>{
if(index % 2 == 0) return (
<div onClick={this.handleClick} id={index} key={index}>
<hr className="featurette-divider" />
<div className ="row featurette" >
<div className="col-md-7">
<h2 className="featurette-heading">First featurette heading. <span className="text-muted">It'll blow your mind.</span></h2>
<p className="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div className="col-md-5">
<img className="featurette-image img-responsive center-block" src={obj.Zdjecie} alt="Generic placeholder image"/>
</div>
</div>
</div>
)
else return (
<div onClick={this.handleClick} id={index} key={index}>
<hr className="featurette-divider" />
<div className ="row featurette" >
<div className="col-md-7 col-md-push-5">
<h2 className="featurette-heading">First featurette heading. <span className="text-muted">It'll blow your mind.</span></h2>
<p className="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
</div>
<div className="col-md-5 col-md-pull-7">
<img className="featurette-image img-responsive center-block" src={obj.Zdjecie} alt="Generic placeholder image"/>
</div>
</div>
</div>
)
})}
</div>
</div>
);
return (
<div>
{ this.state.isArticleListPage ? articlelistpage : null }
{ this.state.isArticlePage ? this.articlepage() : null }
</div>
);
}
}
ReactDOM.render(
<Strona />,
document.getElementById('root')
);<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
即使将这段代码放入剪辑中我也遇到了问题。 代码问题是我没有从ID为
的div传递id
<div onClick={this.handleClick} id={index} key={index}>
</div>
到
handleClick(event) {
const {id} = event.target;
console.log(id);
this.setState({
id: event.target.id,
isArticleListPage : false,
isArticlePage : true
});
}`
错误img 
2 个答案:
答案 0 :(得分：4)
您可以尝试以下操作：
<div id={index} onClick={(e) => this.handleClick(index,e)} />
并覆盖这样的功能：
handleClick(id, event){console.log(id)}
你可以找到小提琴here
答案 1 :(得分：0)
看起来你的问题中有很多不必要的代码，试着做一个很简洁的例子。我想你的意思是如何将id作为参数传递给句柄点击功能？可以使用箭头功能完成。
<div id={index} onClick={() => this.handleClick(index)} />
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？