Reactjs 当映射表记录时，如何使一个表记录在React中单击按钮时可编辑？

我的问题是，当从列表映射中获取表行时，如何使一个表记录像底部的图片一样可编辑

<tbody>
          {
          this.state.languageList.map((list, index) =>
            <TableElement key={index} item={list} />
             )
          }
          </tbody>

{
this.state.languageList.map（（列表，索引）=>
)
}

在TableElement.jsx中

render() {
    const { language, languageLevel, personLanguageId } = this.props.item;
    return (
        <tr key={personLanguageId}>
            <td>
                <div>
                    {language}
                </div>
            </td>
            <td>
                <div>
                    {languageLevel}
                </div>
            </td>
            <td>
                <i className="pencil alternate icon" />
                <i className="trash icon" onClick={() => this.delete(personLanguageId)} />
            </td>
        </tr>

    );
}

render（）{
const{language，languageLevel，personLanguageId}=this.props.item；
返回(
{语言}
{languageLevel}
this.delete（personLanguageId）}/>
);
}

---

您可以存储在父组件中选择哪个项目的信息，并将此信息传递给该项目：

this.state.languageList.map((list, index) =>
    <TableElement
        key={index}
        item={list}
        isSelected={ list.personLanguageId === this.state.selectedId }
        onSelect={ ( id )=>{ this.setState({ selectedId: id }); } }
    />
)

<tr onClick={ ()=>{ this.props.onSelect( personLanguageId ) } }>
    { !this.props.isSelected ? null :
        <td>
            <i onClick={() => this.delete(personLanguageId)} />
        </td>
    }
</tr>

this.state.languageList.map（（列表，索引）=>
{this.setState（{selectedId:id}）；}
/>
)

在项目内部：

this.state.languageList.map((list, index) =>
    <TableElement
        key={index}
        item={list}
        isSelected={ list.personLanguageId === this.state.selectedId }
        onSelect={ ( id )=>{ this.setState({ selectedId: id }); } }
    />
)

<tr onClick={ ()=>{ this.props.onSelect( personLanguageId ) } }>
    { !this.props.isSelected ? null :
        <td>
            <i onClick={() => this.delete(personLanguageId)} />
        </td>
    }
</tr>

{this.props.onSelect（personLanguageId）}>
{！this.props.isSelected？空：
this.delete（personLanguageId）}/>
}

您具体有什么问题？确定要使哪个项目可编辑？实际显示要编辑的控件？控制编辑值？您是如何实现的？