如何在 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 {

  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(e) {

    e.preventDefault();

    const Books = this.state.Genres.find(

      (genre) => genre.name === e.target.value

    ).Books;

    this.setState({ selectedGenre: e.target.value, Books });

  }

  ChangeBook(e) {

    e.preventDefault();

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

  }

  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((genre, key) => {

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

            })}

          </select>

        </div>

        <div>

          <label>Books</label>

          <select

            placeholder="Books"

            value={this.state.selectedBook}

            onChange={this.ChangeBook}

            disabled={this.state.selectedGenre === '--Choose Genre--'}

          >

            <option>--Choose Book--</option>

            {this.state.Books.map((book, key) => {

              return <option key={key}>{book}</option>;

            })}

          </select>

        </div>

      </div>

    );

  }

}

export default Dropdown;

Answer 2

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