Question

目前在我的反应应用程序中，我正在加载许多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;

React，在动态加载的div元素上添加onClick事件。

1 个答案: