反應，遍歷對象，顯示列表，並在選定對象時抓取該對象

Question

編輯：我已經通過從列表中獲取target.value並將其傳遞給firstComp.js使其工作 。 下面是onChange方法，但這是最佳實踐嗎？

 onchange = (e) =>{
    let name= e.target.value
    let currentName= this.state.foodData.map((item)=>{
    if(name==item.name){
      console.log(item)
    }
})
}

我在做斯蒂芬·格里瑟斯課程時會做出反應，並嘗試實現他在個人項目中教的內容，但我無法全神貫注。

我有一個列表，遍歷對象數組。 當我從該列表中選擇某項時，我希望它使用該對象更新狀態。

布局..

DropDownList.js =返回一個包含foodData中所有成分名稱的下拉列表

DropDownItem =遍歷foodData，為每個數據返回一個選項值。

foodData .js = db看起來像這樣。

let foodData=[
  {"name":"MCT Oil", "brand":"Keppi Keto", "servings":1}
  {"name":"Chunky Peanut Butter", "brand":"Skippy"}
]

firstComp.js

import React, { Component} from 'react'
import ReactDOM from 'react-dom'
import foodData from './food/foodData.js'
import DropDownList from './DropDownList.js'

class Layout extends Component {
  constructor () {
    super()
    this.state = {
      foodData:foodData,
      selectedFood:''
    }
    this.onchange =this.onchange.bind(this)
  }
  onchange = (e) =>{
  console.log(e.target.value)

  }
  render () {
    return (<div className='home'>
        <DropDownList foodData={this.state.foodData} onchange={this.onchange}  />
      </div>)
  }
}
const app = document.getElementById('app')
ReactDOM.render(<Layout />, app)

DropDownList.js

import React from 'react'
import DropDownItem from './DropDownItem.js'

const DropDownList = (props) =>{
****let textInput = React.createRef();**** //REFS
const ingredientItems = props.foodData.map((ingredient, i)=>{
  return<DropDownItem key={i} ingredient={ingredient} **ref={textInput}**//REFS />
})
    return(
        <select value={ingredientItems.name} onChange ={ (e) => props.onchange(e)} >
          {ingredientItems}
        </select>
    )
}
export default DropDownList;

DropDownItem.js

import React from 'react'

const DropDownItem = ({ingredient}) =>{
  const itemName = ingredient.name
    return(<option value={itemName}>{itemName}</option> )
  }
export default DropDownItem;

Answer 1

您無需在此處使用引用。 您可以在DropdownList組件中使用某種handleChange函數，並將該值發送回父組件。

const DropDownList = (props) => {
  const handleChange = e => props.onchange( e.target.value );
  const ingredientItems = props.foodData.map((ingredient) =>
    <DropDownItem key={ingredient.name} ingredient={ingredient} /> );

  return (
    <select onChange={handleChange}>
      {ingredientItems}
    </select>
  )
}

並在父組件中：

class Layout extends Component {
  state = {
    foodData,
    selectedFood: foodData[0]
  };

  onchange = name =>
      this.setState({
          selectedFood: foodData.filter(food => food.name === name)[0]
      });

  render() {
    return (<div className='home'>
      <DropDownList foodData={this.state.foodData} onchange={this.onchange} />
    </div>)
  }
}

或無需費力地處理值和過濾器，我們可以使用e.target.options.selectedIndex因為OP可以發現他/她自己：)這是一種更簡潔的方法，並且可以這樣工作（僅相關部分）：

DropdownList.js

const handleChange = e => props.onchange( e.target.options.selectedIndex);

Layout.js

onchange = index => this.setState({ selectedFood: foodData[index] });