ReactJSL如何使用按钮定位地图功能中的单个元素

Question

我有一个使用map函数呈现元素列表的Component。每个元素都有一个删除和编辑按钮。我已经添加了删除功能，但是编辑时遇到了问题。

我想要的功能是：单击编辑项，将H3元素（即标题）替换为输入字段，然后让用户更新名称。我尝试用另一个元素替换一个元素，但这仅适用于列表的第一个元素，因为我使用'getElementById'获取了该元素，我尝试使用querySelector进行此操作，但这仅选择了数组的最后一个元素。

我不知道该怎么做。我知道问题在于选择正确索引处的特定元素。我使用id作为键，但是我不知道如何正确替换html元素。任何帮助将不胜感激。

这是map函数呈现元素的位置：

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

Answer 1

使用React时，尽量避免直接操作DOM元素。在这种情况下，您应该使用另一种方法：将字段添加到此类的状态：&nbsp;editingDonutId单击甜甜圈时，将设置editingDonutId为相应的ID，完成后将其重置。在render函数中，在中map进行条件渲染，以检查当前渲染甜甜圈是否与ID相同editingDonutId，如果为true，则改为渲染输入。