[英]How to pass props onClick from one component to another in React JS
I have a component which gathers an array of ingredients from a user input.我有一个组件可以从用户输入中收集一系列成分。
I am trying to send this state array as props to another component, onclick, when I click a 'search' button.当我单击“搜索”按钮时,我试图将此状态数组作为道具发送到另一个组件 onclick。
However, I cannot get the props to pass and don't know what to do.但是,我无法让道具通过,也不知道该怎么办。
SearchBar component:搜索栏组件:
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
Component to receive the props:接收道具的组件:
function MultiSearch(ingredients) { console.log(ingredients) etc... the props never get logged
You would have to move your state to the parent component of both child components.您必须将您的状态移动到两个子组件的父组件。
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} />
</>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.