从孩子到家长获取信息

Question

我正在尝试更新这个react ShoppingList中的项目。我已经尝试了多种设置来解决这个问题。我真的不知道该怎么做。我试着使用refs，把我的物品从items函数转移到ShoppingList函数。我不知道如何将信息从孩子传递给父母。这就是我要做的。

import React, {useState, createRef} from 'react'
import AddButton from './AddButton'
import Items from './Items'
function ShoppingList(props) {
const onSubmit = e => {
// get items form Items
tempItems.push(e.target[0].value)
// set items from Items
}
return (
<div>
<AddButton onSubmit={onSubmit}  />
<Items />
</div>
)
}
export default ShoppingList

import React, {useState} from 'react'
function Items(props) {
const [items, setItems] = React.useState(["test"])
function getItems() {
return items;
}
function setItemss(items) {
setItems(items)
}
return (
<div>
{items.map(item => {
return (
<p>{item}</p>
)
})}
</div>
)
}
export default Items

不是真的有必要，但我也会在的情况下添加这个

function AddButton(props) {
const [input, setInput] = React.useState("")
const onChange = e => {
setInput(e.target.value)
}
const onSubmit = e => {
e.preventDefault()
setInput("")
props.onSubmit(e)
}
return (
<div>
<form onSubmit={onSubmit}>
<input type="text" value={input} 
onChange={onChange}></input>
<input type="submit"></input>
</form>
</div>
)
}
export default AddButton

Answer 1

每当您发现父级需要访问子级的状态时，您总是可以考虑提升状态。

在您的情况下，您可能希望管理购物列表中的items状态，并将状态作为道具传递给物品。

import React, {useState, createRef} from 'react'
import AddButton from './AddButton'
import Items from './Items'
function ShoppingList(props) {
const [items, setItems] = useState(["test"]);
const onSubmit = e => {
// We use `items.concat` here to avoid modifying 
// the original array to ensure immutability
setItems(items.concat(e.target[0].value));
}
return (
<div>
<AddButton onSubmit={onSubmit}  />
<Items items={items}/>
</div>
)
}
export default ShoppingList

import React, {useState} from 'react'
function Items(props) {
// We access props.items in Items, and manage the state in ShoppingList
return (
<div>
{props.items.map(item => {
return (
<p>{item}</p>
)
})}
</div>
)
}
export default Items

代码沙箱