添加和删除组件的 onClick 函数
Add and Remove the Component onClick function
我开始做 React 项目。使用功能组件和钩子进行开发。
function comp1{
const addHandeler = () =>{
//how to add component
}
return(<div>
<comp2/>
// on click of add <comp2/> ...
<input type="button" id="add" value="Add"
onClick={addHandeler} />
</div>)
}
我想通过单击 div 中的添加按钮添加多个组件 comp2。
function comp2{
const deleteHandeler = () =>{
// how to delete the component from comp1
}
return(
<div>
...
<input type="button" id="delete" value="Delete"
onClick={deleteHandeler} />
</div>
)
}
同样会有删除按钮,它将从 comp1 div 中删除 comp2。
或者让我知道是否有任何其他最好的方法来完成这个。
由于您要添加和删除组件列表,因此在创建每个组件后都需要有一个唯一标识符。这是关于如何使用 nanoId 的简化版本(您使用它从新元素创建 id,而不是在地图上调用它):
Comp1
import { nanoid } from 'nanoid'
function Comp1() {
const [ids, setIds] = useState([])
const addHandeler = () => {
const newId = nanoid()
setIds(ids => [...ids, newId])
}
const deleteHandeler = (removeId) => setIds(ids => ids.filter(id => id !== removeId))
return(
<div>
{ ids.map(id => <Comp2 key={id} deleteHandeler={() => deleteHandeler(id)} />) }
<input type="button" id="add" value="Add" onClick={addHandeler} />
</div>
)
}
Comp2
function Comp2({ deleteHandeler }) {
return (
<div>
<input type="button" id="delete" value="Delete"
onClick={deleteHandeler} />
</div>
)
}
我开始做 React 项目。使用功能组件和钩子进行开发。
function comp1{
const addHandeler = () =>{
//how to add component
}
return(<div>
<comp2/>
// on click of add <comp2/> ...
<input type="button" id="add" value="Add"
onClick={addHandeler} />
</div>)
}
我想通过单击 div 中的添加按钮添加多个组件 comp2。
function comp2{
const deleteHandeler = () =>{
// how to delete the component from comp1
}
return(
<div>
...
<input type="button" id="delete" value="Delete"
onClick={deleteHandeler} />
</div>
)
}
同样会有删除按钮,它将从 comp1 div 中删除 comp2。 或者让我知道是否有任何其他最好的方法来完成这个。
由于您要添加和删除组件列表,因此在创建每个组件后都需要有一个唯一标识符。这是关于如何使用 nanoId 的简化版本(您使用它从新元素创建 id,而不是在地图上调用它):
Comp1
import { nanoid } from 'nanoid'
function Comp1() {
const [ids, setIds] = useState([])
const addHandeler = () => {
const newId = nanoid()
setIds(ids => [...ids, newId])
}
const deleteHandeler = (removeId) => setIds(ids => ids.filter(id => id !== removeId))
return(
<div>
{ ids.map(id => <Comp2 key={id} deleteHandeler={() => deleteHandeler(id)} />) }
<input type="button" id="add" value="Add" onClick={addHandeler} />
</div>
)
}
Comp2
function Comp2({ deleteHandeler }) {
return (
<div>
<input type="button" id="delete" value="Delete"
onClick={deleteHandeler} />
</div>
)
}