通过onClick函数React传递ID [英] Passing id with onClick function React
本文介绍了通过onClick函数React传递ID的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在将ID传递到handleClick函数并将console.log'log到控制台中时遇到问题. 我尝试了一个简单的示例，该示例可以工作，但是我不明白为什么它在我的实现中不起作用.
I am having problem with passing id to handleClick function and console.log'ing it into the console. I have tried simple example which works but i can not understand why it doesn't work in my implementation.
这是工作示例的代码:
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:
I had problems even in puting this code in the snipped. Problem with the code is that i am not passing id from the those divs with 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
推荐答案
您可以尝试以下操作:
<div id={index} onClick={(e) => this.handleClick(index,e)} />
并像这样重写函数:
handleClick(id, event){console.log(id)}
您可以在此处找到
这篇关于通过onClick函数React传递ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
