如何在 React-Js 中添加依赖下拉列表

Question

我是 reactjs 的新手，我正在尝试学习 React-js。我想建立依赖下拉菜单。如果我选择类型小说，它应该显示小说类型的书籍。现在所有这些都是硬编码的，我还没有将它链接到数据库/后端。

我搜索了一些东西并想出了这个，但它不能正常工作。

class Dropdown extends Component {

  constructor(props) {

    super(props);

    this.state = {

      Genres: [],

      Books: [],

      selectedGenre: "--Choose Genre--",

      selectedBook: "--Choose Book--",

    };

    this.ChangeGenre = this.ChangeGenre.bind(this);

    this.ChangeBook = this.ChangeBook.bind(this);

  }

  componentDidMount() {

    this.setState({

      Genres: [

        { name: "Fiction", Books: ["GOT", "LOTR", "Harry Potter"] },

        { name: "Murder", Books: ["Dragon", "Tattoo", "Girl"] },

        { name: "Thriller", Books: ["Angel", "Lost Symbol", "Davinci"] },

      ],

    });

  }

  ChangeGenre(event) {

    this.setState({

      selectedGenre: event.target.value,

    });

    this.setState({

      Books: this.state.Genres.find((b) => b.name === event.target.value).Books,

    });

  }

  ChangeBook(e) {

    this.setState({ selectedBook: e.target.value });

    const stats = this.state.Genres.find(

      (g) => g.name === this.state.selectedGenre

    ).Books;

    this.setState({

      Books: stats.find((stat) => stat === e.target.value).Books,

    });

  }

  render() {

    return (

      <div id="container">

        <h2>Cascading or Dependent Dropdown using React</h2>

        <div>

          <label>Genre</label>

          <select

            placeholder="Genre"

            value={this.state.selectedGenre}

            onChange={this.ChangeGenre}

          >

            <option>--Choose Genre--</option>

            {this.state.Genres.map((e, key) => {

              return <option key={key}>{e.name}</option>;

            })}

          </select>

        </div>

Books 下拉列表不显示任何书籍，并且单击任何选项都会引发错误 cannot read 'Books' of Undefined。

Answer 1

import React, { Component } from "react";class Dropdown extends Component {&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; Genres: [],&nbsp; &nbsp; &nbsp; Books: [],&nbsp; &nbsp; &nbsp; selectedGenre: '--Choose Genre--',&nbsp; &nbsp; &nbsp; selectedBook: '--Choose Book--'&nbsp; &nbsp; };&nbsp; &nbsp; this.ChangeGenre = this.ChangeGenre.bind(this);&nbsp; &nbsp; this.ChangeBook = this.ChangeBook.bind(this);&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; Genres: [&nbsp; &nbsp; &nbsp; &nbsp; { name: "Fiction", Books: ["GOT", "LOTR", "Harry Potter"] },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Murder", Books: ["Dragon", "Tattoo", "Girl"] },&nbsp; &nbsp; &nbsp; &nbsp; { name: "Thriller", Books: ["Angel", "Lost Symbol", "Davinci"] }&nbsp; &nbsp; &nbsp; ]&nbsp; &nbsp; });&nbsp; }&nbsp; ChangeGenre(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; const Books = this.state.Genres.find(&nbsp; &nbsp; &nbsp; (genre) => genre.name === e.target.value&nbsp; &nbsp; ).Books;&nbsp; &nbsp; this.setState({ selectedGenre: e.target.value, Books });&nbsp; }&nbsp; ChangeBook(e) {&nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; this.setState({ selectedBook: e.target.value });&nbsp; }&nbsp; render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div id="container">&nbsp; &nbsp; &nbsp; &nbsp; <h2>Cascading or Dependent Dropdown using React</h2>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Genre</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Genre"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.selectedGenre}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.ChangeGenre}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>--Choose Genre--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.Genres.map((genre, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <option key={key}>{genre.name}</option>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <label>Books</label>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; placeholder="Books"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={this.state.selectedBook}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onChange={this.ChangeBook}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; disabled={this.state.selectedGenre === '--Choose Genre--'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option>--Choose Book--</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.Books.map((book, key) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return <option key={key}>{book}</option>;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; );&nbsp; }}export default Dropdown;

Answer 2

如果还不晚，你也可以试试React Conditional Selection 的方法。