javascript - react 点击项目以显示详细信息

Question

我是 React 新手，我正在尝试与 swapi API 进行交互。 我想获取电影列表(电影标题列表)，并且当我单击标题时显示 json 对象中的 opening_crawl。 我设法将电影标题排列在一个数组中。我不知道如何从这里继续。

这是我的代码:

class StarWarsApp extends React.Component {
  render() {
    const title = "Star Wars";
    const subtitle = "Movies";
    return (
      <div>
        <Header title={title} />
        <Movies />
      </div>
    );
  }
}

class Header extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
      </div>
    );
  }
}

class Movies extends React.Component {
  constructor(props) {
    super(props);
    this.handleMovies = this.handleMovies.bind(this);
    this.state = {
      movies: []
    };
    this.handleMovies();
  }

  handleMovies() {
    fetch("https://swapi.co/api/films")
      .then(results => {
        return results.json();
      })
      .then(data => {
        console.log(data);
        let movies = data.results.map(movie => {
          return <div key={movie.episode_id}>{movie.title}</div>;
        });

        this.setState(() => {
          return {
            movies: movies
          };
        });
      });
  }
  render() {
    return (
      <div>
        <h1>Episodes</h1>
        <div>{this.state.movies}</div>
      </div>
    );
  }
}

ReactDOM.render(<StarWarsApp />, document.getElementById("app"));

Answer 1

要迭代电影，请在渲染方法中添加以下内容:

render(){
  return (
    <div>
      <h1>Episodes</h1>
      {
        this.state.movies.map((movie, i) => {
          return (
            <div className="movie" onClick={this.handleClick} key={i}>{movie.title}
              <div className="opening">{movie.opening_crawl}</div>
            </div>
          );
        })
      }
    </div>
  );
}

将此方法添加到您的电影组件中，以将单击时的事件类添加到具有“movie”className 的 DIV:

handleClick = event => {
  event.currentTarget.classList.toggle('active');
}

将此 css 包含到您的项目中:

.movie .opening {
  display: none;
}

.active .opening {
  display: block
}