React 如何在弹出窗口中显示单个数据

Question

我正在学习反应我想在单击特定 div 时显示电影数据。目前，我调用了花式框，这不是获取结果的正确方法

因此，单击特定的div 后，我需要帮助来显示电影数据。

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: [],
      search: '',
    };
  }

  updateSearch(event) {
    this.setState({search: event.target.value.substr(0, 20)});
  }

  componentDidMount() {
    fetch('http://www.omdbapi.com/?apikey=MyKey&s=fast&plot=full')
      .then((Response) => Response.json())
      .then((findresponse) => {
        console.log(findresponse);
        this.setState({
          data: findresponse.Search,
        });
      });
  }
  render() {
    let filteredMovie = this.state.data.filter((dynamicData) => {
      return dynamicData.Title.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1;
    });
    return (
      <div className="container movies_list">
        <div className="row">
          <div className="col-md-12  p-4">
            <form>
              <input
                type="text"
                className="form-control"
                placeholder="Search"
                value={this.state.search}
                onChange={this.updateSearch.bind(this)}
              />
            </form>
          </div>

          {filteredMovie &&
            filteredMovie.map((dynamicData, key) => (
              <div className="col-md-3 mb-3" key={key}>
                <div className="card">
                  <img src={dynamicData.Poster} className="card-img-top" alt="..." />
                  <div className="card-body">
                    <h6 className="card-title">{dynamicData.Title} </h6>
                    <h6 className="card-title">Year: {dynamicData.Year} </h6>
                    <p className="card-text">{dynamicData.Plot} </p>
                    <a
                      data-fancybox
                      data-src="#hidden-content"
                      href="javascript:;"
                      className="btn btn-info"
                    >
                      View
                    </a>
                    <div id="hidden-content">
                      <img src={dynamicData.Poster} className="card-img-top" alt="..." />
                      <h2>{dynamicData.Title}</h2>
                      <p>{dynamicData.Year}</p>
                    </div>
                  </div>
                </div>
              </div>
            ))}
        </div>
      </div>
    );
  }
}

Answer 1

我强烈推荐 Reakit 用于模态和弹出框。