React - 通过事件onClick在子组件到父组件中显示所选列表项
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React - 通过事件onClick在子组件到父组件中显示所选列表项相关的知识，希望对你有一定的参考价值。
我有一个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'));
请帮助我！）抱歉我的英语
答案
如果我理解正确，您需要将选定列表项作为子组件（TableLine）显示到Table，并将该表作为子组件导入父组件。
检查以下代码：
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}.
/>
)
}
}
和孩子
export default class Table extends React.Component{
constructor(props){
super(props)
this.arr = [
{id:1, content:"content1"},
{id:2, content:"content2"},
{id:3, content:"content3"}
]
}
render() {
return (
<ul>
{this.arr.map((element, index) => { return (<TableLine
data={element}
onClick={this.props.onClick}
/>)
})}
</ul>
)
}
}
class TableLine extends React.Component{
handleClick = () => {
this.props.onClick(this.props.data.id);
}
render() {
return(
<li
onClick={this.handleClick}>
{this.props.data.content}
</li>
)
}
}
检查下面demo
另一答案
你可以解除状态。请查看下面的更新代码段。
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>以上是关于React - 通过事件onClick在子组件到父组件中显示所选列表项的主要内容，如果未能解决你的问题，请参考以下文章