通过事件 onClick 将选定的列表项从子组件显示到父组件

Question

我有一个 React 应用程序。我有 2 个子组件和 onClick 动作作为道具。我需要通过单击子项 LI(TableLine) 来获取父项 Class(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'));

请帮助我！）对不起我的英语

Answer 1

You can lift the state up. Please check the updated snippet below.

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>

希望对您有所帮助。

Answer 2

如果我理解正确，您需要将 child 组件（Table 行）的选定列表项显示到 Table，并将 Table 导入为Parent 应用程序组件中的 Child 组件。

检查下面的代码：

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}.

                 />
        )
  }
}

和child

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

通过事件 onClick 将选定的列表项从子组件显示到父组件

Show selected list item from child to parent component through event onClick

children

parent

onclick

parent-child

reactjs