反應，在動態加載的div元素上添加onClick事件。

Question

當前，在我的react應用程序上，我正在加載許多div，這些div正在動態加載數據庫中的信息。 我試圖做到這一點，所以當我單擊這些div之一時，會彈出一個彈出窗口，其中包含與該div相關的更多深度數據。 但是，它似乎沒有按預期方式工作。 onClick不適用於此動態加載的div。 我嘗試在我的主要App組件上的標准按鈕元素上測試彈出窗口，並且該彈出窗口可以正常工作。 這是我的代碼：

class ResultBox extends Component {
  constructor(props){
  super(props);
  this.state = {
    showPopup: false,
    posts: []
  };
}
  togglePopup() {
    this.setState({
    showPopup: !this.state.showPopup
  });
 }
   componentDidMount() {
    axios.get('http://localhost:3001/api/events')
      .then(res => {
      let posts = res.data.map(obj => obj);
      this.setState({posts});
      console.log(posts);
     });
  }
  render() {                 ********** Below here is where my issue is *****
    return (
      this.state.posts.map(events =>
      <div key={events.key} 
        className='result_box' 
        onClick={this.togglePopup.bind(this)}>

       <p>{events.name}</p>
        {events.place && events.place.location && <p>
        {events.place.location.city}</p>}
        </div>
     )
         {this.state.showPopup ?
           <Result
           text='Close Me'
           closePopup={this.togglePopup.bind(this)}
          />
         : null
        }
    );
 }
 }

而且此ResultBox正在App中呈現

 class App extends Component {

 render() {
   return (
      <div className="App">
        <NavBar className="navbar-body"/>
        <div className="spacer"></div>
        <p className="App-intro">
           Find a jam
         </p>
      <ResultBox />

     </div>
   );
 }
}

結果只是彈出框組件。 如果有人知道我如何使它工作，將不勝感激。

Answer 1

是的，您需要在div中存儲帖子數據，這就是我將其結構化的方式。

class ResultBox extends Component {

  constructor(props){

  super(props);

      this.state = {
        showPopup: false,
        posts: []
      };

      this.togglePopup = this.togglePopup.bind(this);
    }

    togglePopup() {
        this.setState({
            showPopup: !this.state.showPopup
        });
    }


   componentDidMount() {

        axios.get('http://localhost:3001/api/events')
          .then(res => {
          let posts = res.data.map(obj => obj);
          this.setState({posts});
          console.log(posts);
        });
    }

  buildRows() {
      return this.state.posts.map( (events, index) =>
          <div key={index} className='result_box' onClick={this.togglePopup}>
            <p>{events.name}</p>
                {events.place && events.place.location &&
                    <p>{events.place.location.city}</p>
                }
            </div>
        );
  }

  render() {

        let rows = this.buildRows();

        return (
            <div>
                {rows}

                {this.state.showPopup &&
                    <Result text='Close Me'closePopup={this.togglePopup.bind(this)}/>
                }                
            </div>
        );
    }
 }

 export default ResultBox;