如何在 React JS 中将道具 onClick 从一个组件传递到另一个组件

Question

我有一个组件，它从用户输入中收集一系列成分。
当我单击 'search' 按钮时，我试图将此状态数组作为道具发送到另一个组件 onclick。
但是，我无法让道具通过，也不知道该怎么办。

SearchBar 组件：

import React, { useState, useEffect } from 'react'
import MultiSearch from '../MultiSearch';

const SearchBar = () => {
  const [ingredients, setIngredients] = useState([])
  const [filteredData, setFilteredData] = useState([])
  
  const [fetchData, setFetchData] = useState([])

  const searchWordInput = document.querySelector('#search-word')


  const handleFilter = (e) => {
    const searchWord = e.target.value
    const newFilter = ingredients.filter((value) => {
      return value.strIngredient1.toLowerCase().includes(searchWord.toLowerCase())
    })
    if (searchWord === "") {
      setFilteredData([])
    } else {
    setFilteredData(newFilter)
    }
  } 


  useEffect(() => {
      fetch("https://www.thecocktaildb.com/api/json/v2/9973533/list.php?i=list")
      .then((resp) => resp.json())
      .then((data) => {
          setIngredients(data.drinks)
      })
  }, [])

  const handleIngredientSelect = (e) => {
    const selected = e.target.textContent
    searchWordInput.value = selected
  }

  const handleAddIngredient = () => {
    setIngredientsSelected([...ingredientsSelected, searchWordInput.value])
    console.log(ingredientsSelected)
    searchWordInput.value = ""
  }

  const passIngredients = (ingredientsSelected) => {
      <MultiSearch ingredients={ingredientsSelected} />
      console.log('Searched!')
  }
console.log(ingredientsSelected)
  return (
    <div className="search">
    <div className="searchInputs">
        <input id="search-word" type="text" placeholder='Enter ingredient' onInput={handleFilter} />
        <input onClick={handleAddIngredient} type="button" value="add ingredient" id="submit-btn"/>
        <input onClick={passIngredients} type="submit" value="search!"/>
        <div className="searchIcon"> 
        </div>    
    </div>
    {filteredData.length !== 0 && (
    <div className="dataResult">
      {filteredData.map((value, key) => {;    
                return (
                    <div key={key} className='dataItem'>
                        <p onClick={handleIngredientSelect} id="ingredient">{value.strIngredient1} </p> 
                    </div>
                );
            })}  
    </div>
)}
</div>
  )
}

export default SearchBar

呈现两个组件的页面：

import React from 'react'
import MultiSearch from '../../components/MultiSearch'
import SearchBar from '../../components/SearchBar'

function Search() {
  return (
    <>
        <SearchBar />
        <MultiSearch />
    </>
  )
}

export default Search

接收道具的组件：

function MultiSearch(ingredients) {
    console.log(ingredients)

etc... the props never get logged

Answer 1

您必须将您的状态移动到两个子组件的父组件。

import React from 'react'
import MultiSearch from '../../components/MultiSearch'
import SearchBar from '../../components/SearchBar'

function Search() {
  const [ingredients, setIngredients] = useState()

  return (
    <>
        <SearchBar setIngredients={setIngredients} />
        <MultiSearch ingredients={ingredients} />
    </>
  )
}

如何在 React JS 中将道具 onClick 从一个组件传递到另一个组件

How to pass props onClick from one component to another in React JS

javascript

reactjs

react-props