reactjs - 映射表记录时，如何在 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

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

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>