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元素。在这种情况下，您应该使用另一种方法：

• 将字段添加到此类的状态： editingDonutId

• 单击甜甜圈时，将设置editingDonutId为相应的ID，完成后将其重置。

• 在render函数中，在中map进行条件渲染，以检查当前渲染甜甜圈是否与ID相同editingDonutId，如果为true，则改为渲染输入。