做出反应。可编辑表

Question

立即为我的英语道歉。

在每一行对面的表格中应该有一个“编辑”按钮，当您单击它时，该行中的所有单元格都变为可编辑的，并且代替“编辑”按钮，出现“保存”按钮。 我花了很多时间，只是想不通。

我需要在没有反应表、反应网格等的情况下发布。

我的桌子：

        <table>
            <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            {props.items.map(item => (
                    <tr key={item.id}>
                        <td>{item.data.name}</td>
                        <td>{item.data.surname}</td>
                        <td>{item.data.age}</td>
                        <td>
                            <button onClick>Edit</button> //need to improve this button

                            <button onClick={() => removeID(user.id)}>Delete</button>

                        </td>
                    </tr>
                ))}
            </tbody>
        </table>
    )

Answer 1

我建议您保存一个状态以指定当前表是否处于编辑模式。这可以像将初始状态设置为{ editMode: false } 一样简单，您将在按钮上创建一个 onClick 处理程序，将editMode 的状态设置为true，（我无法从示例中判断您是是否要使用钩子，所以简单地看看你将如何改变所说的状态）。

现在，有了这个状态，你可以这样做 <button onClick={this.toggleEditMode}>{ editMode ? "Save" : "Edit" }</button> ，如果 editMode 是 true，那么显示 Save 否则 Edit

要使单元格可编辑，这完全是另一个问题，但我建议的方法是使用editMode 状态，使用上面相同的方法更改输入的 tds 的值，然后您必须附加onChange将更新 items 道具的处理程序。只需弄清楚要更新哪个项目，该关键道具将帮助您这样做。