添加和删​​除组件的 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>
  )
}