我有一個(gè)使用map函數(shù)呈現(xiàn)元素列表的Component。每個(gè)元素都有一個(gè)刪除和編輯按鈕。我已經(jīng)添加了刪除功能，但是編輯時(shí)遇到了問(wèn)題。我想要的功能是：?jiǎn)螕艟庉嬳?xiàng)，將H3元素（即標(biāo)題）替換為輸入字段，然后讓用戶更新名稱。我嘗試用另一個(gè)元素替換一個(gè)元素，但這僅適用于列表的第一個(gè)元素，因?yàn)槲沂褂?#39;getElementById'獲取了該元素，我嘗試使用querySelector進(jìn)行此操作，但這僅選擇了數(shù)組的最后一個(gè)元素。我不知道該怎么做。我知道問(wèn)題在于選擇正確索引處的特定元素。我使用id作為鍵，但是我不知道如何正確替換html元素。任何幫助將不勝感激。這是map函數(shù)呈現(xiàn)元素的位置：class Donut extends Component {  render(){  const {donuts, deleteDonut, editDonut} = this.props;  const donutsList = donuts.map((donut) => {    return <div key={donut.id} className="donut">    <div className="name">    <img src={donut.image} />    <div id="donut-name">      <h3 id="donut-title">{donut.name}</h3>      <p>{donut.date}</p>    </div>      </div>        <div className="price">        <p>{donut.price}</p>        <img src="img/edit.png" id={donut.id} onClick={()=>{editDonut(donut.id)}} />        <img src="img/delete.png" id={donut.id} onClick={() => {deleteDonut(donut.id)}} />       </div>      </div>})    return (      <div>        {donutsList}      </div>    )  }}export default Donut