Reactjs 从下拉组件获取状态数据

新的反应，并有一个下拉组件，即下面，在选择后，我得到一个需要处理的值（即

id

）

---

您可以将

handleChange

函数作为道具传递给子元素，如

<DropDown handleChange={this.handleChange}/>

并且可以在父组件中声明

handleChange

你也可以参考

import React, { Component } from 'react';
import DropDown from './comps/Dropdown';
import * as BooksAPI from './data/BooksAPI';

class BooksApp extends Component {

  state = {
    currentlyReading: [],
    wantToRead: [],
    read: [],
    search: [],
    reset: [],
    error: false
  };

  componentDidMount = () => {
    BooksAPI.getAll()
      .then(books => {
        this.setState({ wantToRead: books });
        console.log(this.state.wantToRead)
      })
      .catch(err => {
        this.setState({ error: true });
      });
  };

  render() {
    return (
    <div>
      <div className="currentlyReading shelf"><h2>Currently</h2>
        {this.state.currentlyReading.map((reading, i) => (
          <div className="item" id={reading.title}>
            <img src={reading.imageLinks&&reading.imageLinks.smallThumbnail} alt="img"/>
            {reading.title}<br></br>
            {reading.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
      <div className="wantToRead shelf"><h2>Want To</h2>
          {this.state.wantToRead.map((wishList, i) => (
            <div className="item" id={wishList.title}>
            <img src={wishList.imageLinks&&wishList.imageLinks.smallThumbnail} alt="img"/>
            {wishList.title} <br></br>
            {wishList.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
      <div className="read shelf"><h2>Read</h2>
        {this.state.read.map((finished, i) => (
            <div className="item" id={finished.title}>
            <img src={finished.imageLinks&&finished.imageLinks.smallThumbnail} alt="img"/>
            {finished.title}<br></br>
            {finished.publisher}
            <img src='\icons\arrow-drop-down.svg' className='toggle'/>
            <DropDown/>
          </div>
          ))}
      </div>
    </div>);
  }
}

export default BooksApp;

<DropDown handleChange={this.handleChange}/>