我的问题是当从列表映射中获取表格行时,如何使一个表格记录可编辑,如底部图片所示?
<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>
);
}
最佳答案
您可以在父组件中存储选择哪个 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>
关于reactjs - 映射表记录时,如何在 React 中单击按钮时使一个表记录可编辑?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52069659/