从下拉组件中获取状态数据答案

【问题标题】：get state data from dropdown component从下拉组件中获取状态数据
【发布时间】：2021-07-09 10:52:22
【问题描述】：

新的反应并有一个下拉组件，ie 下面，在选择时我得到一个我需要处理的值（ieid）。

import React, { Component } from 'react';

    class DropDown extends Component {
      state = {
        //value: this.props
        value: id
      };
      handleChange = event => {
        const { value } = event.target;
        this.setState({ value });
    
        let id = event.target.parentElement.id;
        console.log(id);
      };
      render() {
        return (
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="move" disabled>
              Move to:
            </option>
            <option value="currentlyReading">Currently Reading</option>
            <option value="wantToRead">Want to Read</option>
            <option value="read">Read</option>
            <option value="none">None</option>
          </select>
        );
      }
    };
    
    export default DropDown;

这里是/app.js，我试图在其中接收id 的下拉选择值。如何传递/接收以下组件中的数据？

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;

【问题讨论】：

标签： reactjs components react-props

【解决方案1】：

您可以将handleChange 函数作为道具传递给子元素，例如

<DropDown handleChange={this.handleChange}/>

并且可以在父组件中声明handleChange。

也可以参考https://codesandbox.io/s/jovial-merkle-tq0u5?file=/src/App.js

【讨论】：