我有一个React应用程序。 我有两个子组件和onClick动作作为道具。 我需要通过onclick on LI（TableLine）获取父类（app）中所选项目的ID。 我找到了一些解决方案，我可以在Table组件中获取id，但我需要在App中获取ID，这是父组件。
class TableLine extends React.Component{
render() {
return(
<li
onClick={() => this.props.clicked(this.props.data.id)}>
{this.props.data.content}
</li>
)
}
}
class Table extends React.Component{
//get ID
clickHandlerActivFinc(e){
console.log(`1ch - ${e}`)
}
render() {
const arr = [
{id:1, content:"content1"},
{id:2, content:"content2"},
{id:3, content:"content3"}
]
return (
arr.map( (item)=> {
return <TableLine
data={item}
clicked={this.clickHandlerActivFinc.bind(this)}
/>
})
)
}
}
class App extends React.Component {
//get NO ID
clickHandlerActivFunc(e){
console.log(`par - ${e}`)
}
render() {`enter code here`
return (<Table
onClick={() => console.log("1")}
//onItemClick = {this.clickHandlerActivFunc}.
/>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));
请帮助我！）抱歉我的英文
答案 0 :(得分：0)
你可以解除状态。请查看下面的更新代码段。
class TableLine extends React.Component{
render() {
return(
<li onClick={this.props.click}>
{this.props.data.content}
</li>
)
}
}
class Table extends React.Component{
handleClick = (item) => {
this.props.showClickedData(item)
}
render() {
const arr = [
{id:1, content:"content1"},
{id:2, content:"content2"},
{id:3, content:"content3"}
]
return (
<div>
{
arr.map( (item) => {
return <TableLine
data={item}
click={() => this.handleClick(item)}
/>
})
}
</div>
)
}
}
class App extends React.Component {
render() {
return (
<Table
showClickedData = {(item) => console.log(item)}
/>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'));<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="app"></div>
希望这有帮助。
答案 1 :(得分：0)
如果我理解正确，您需要将选定列表项作为子组件（TableLine）显示到Table，并将该表作为子组件导入父组件。
检查以下代码：
<html>
<body>
<div class="box-content" id="box-content-schranka" style="display: block;">
<div class="page">
<div class="products-worth clearfix">
<div class="sort-by">
<strong>List:</strong>
<select id="listNames" tabindex="1" style="position: relative; display: none;" sb="88543365">
<option value="-1">basic</option>
<option value="telky">normal</option>
<option value="-4">extended</option>
</select>
<div id="sbHolder_88543365" class="sbHolder" tabindex="1">
<a id="sbToggle_88543365" href="#" class="sbToggle sbToggleOpen" />
<a id="sbSelector_88543365" href="#" class="sbSelector sbFocus">základný</a>
<ul id="sbOptions_88543365" class="sbOptions" style="top: 30px; max-height: 369px;">
<li>
<a href="#-1" rel="-1" class="sbFocus">základný</a>
</li>
<li>
<a href="#telky" rel="telky">telky</a>
</li>
<li>
<a href="#-4" rel="-4">navštívené</a>
</li>
</ul></div></div>
<!--sort-by-->
</div>
<!--slider-menu-content-->
<div id="carousel" class="flexslider">
<div class="flex-viewport" style="overflow: hidden; position: relative;">
<ul class="slides" style="width: 2400%; transition-duration: 0s; transform: translate3d(0px, 0px, 0px);">
<li class="flex-active-slide" style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/vysavace/philips-fc-7088-01';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=1063117&t=1" draggable="false" />
</a>
<br />363.89
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/vysavace/bissell-17132-crosswave';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=2149770&t=1" draggable="false" />
</a>
<br />278.90
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/mixery-slahace/bosch-msm-67160';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=916735&t=1" draggable="false" />
</a>
<br />39.90
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/sendvicovace/eta-4156-90000-tampo';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=1127547&t=1" draggable="false" />
</a>
<br />37.67
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/susicky/electrolux-ew8h358sc';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=2326939&t=1" draggable="false" />
</a>
<br />472.77
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/susicky/electrolux-ew8h458bc-bielizne';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=2163906&t=1" draggable="false" />
</a>
<br />489.00
</li>
<li style="width: 68px; margin-right: 5px; float: left; display: block;">
<a href="javascript:void(0)" onclick="window.location='/mixery-slahace/bosch-msm-67170';">
<img width="60" height="60" src="https://ii.nnpi.sk/ii2.ashx?m=1&k=925944&t=1" draggable="false" />
</a>
<br />46.70
</li>
</ul>
</div>
<ul class="flex-direction-nav">
<li class="flex-nav-prev">
<a class="flex-prev" href="#" />
</li>
<li class="flex-nav-next">
<a class="flex-next" href="#" />
</li>
</ul>
</div>
</div>
</div>
</body>
</html>和孩子
class App extends React.Component {
//get ID
clickHandlerActivFinc(e){
console.log(`1ch - ${e}`)
alert(`1ch - ${e}`)
}
render() {
return (<Table onClick={ this.clickHandlerActivFinc.bind(this)}
//onItemClick = {this.clickHandlerActivFunc}.
/>
)
}
}
检查以下demo