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

Question

我的问题是，当从列表映射获得表行时，如何使一个表的记录可编辑，如底部的图片所示？

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

在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>

    );
}

Answer 1

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

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>