如何仅在单击按钮的那一行更新按钮?

Question

当前，当我单击任何按钮时，所有编辑按钮都更改为更新按钮，但我只想触发实际执行操作的行，而不触发任何其他按钮。我在我的ReactJs项目中使用下面的代码片段。有谁能帮我提个建议吗?请注意,我不使用钩子。

import React from 'react';

class GridSample extends React.Component {
constructor() {
super();
this.state = {
clicked: false,
};
this.handleOnedit = this.handleOnedit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
}
handleOnedit = (event) => {
const par = event.target.parentNode;
const suppar = par.parentNode;
suppar.setAttribute('contenteditable', true);
suppar.focus();
this.setState({ clicked: true });
};

handleOndelete() {
alert('this is delete button');
}

handleCancel() {
window.location.replace(false);
}

handleUpdate() {
this.setState({
clicked: false,
});
}

render() {
console.clear();
return (
<div>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Action</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>
{!this.state.clicked ? (
<input type="button" value="Edit" onClick={this.handleOnedit} />
) : (
<input
type="button"
value="Update"
onClick={this.handleUpdate}
/>
)}
{this.state.clicked ? (
<input
type="button"
value="Cancel"
onClick={this.handleCancel}
/>
) : (
<input
type="button"
value="Delete"
onClick={this.handleOndelete}
/>
)}
</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>
{!this.state.clicked ? (
<input type="button" value="Edit" onClick={this.handleOnedit} />
) : (
<input
type="button"
value="Update"
onClick={this.handleUpdate}
/>
)}
{this.state.clicked ? (
<input
type="button"
value="Cancel"
onClick={this.handleCancel}
/>
) : (
<input
type="button"
value="Delete"
onClick={this.handleOndelete}
/>
)}
</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
<td>
{!this.state.clicked ? (
<input type="button" value="Edit" onClick={this.handleOnedit} />
) : (
<input
type="button"
value="Update"
onClick={this.handleUpdate}
/>
)}
{this.state.clicked ? (
<input
type="button"
value="Cancel"
onClick={this.handleCancel}
/>
) : (
<input
type="button"
value="Delete"
onClick={this.handleOndelete}
/>
)}
</td>
</tr>
</table>
</div>
);
}
}

export default GridSample;

Answer 1

基本上，您需要将数据存储在数组中，这将有助于呈现类似表的东西:

const data = [
{ id: 1, firstName: 'Jill', lastName: 'Smith', age: 50 },
{ id: 2, firstName: 'Eve', lastName: 'Jackson', age: 94 },
{ id: 3, firstName: 'John', lastName: 'Doe', age: 80 },
];

现在你可以使用map:

来渲染每一行

{data.map(({ id, firstName, lastName, age }) => (
<tr key={id}>
<td>{firstName}</td>
<td>{lastName}</td>
<td>{age}</td>
<td>
{this.state.updateId === id ? (
<input
type="button"
value="Edit"
onClick={this.handleOnedit}
/>
) : (
<input
type="button"
value="Update"
onClick={() => this.handleUpdate(id)}
/>
)}
{this.state.clicked ? (
<input
type="button"
value="Cancel"
onClick={this.handleCancel}
/>
) : (
<input
type="button"
value="Delete"
onClick={this.handleOndelete}
/>
)}
</td>
</tr>
))}

为了区分每一行，您应该有一个状态值，如updateId，以知道您正在编辑哪一行:

this.state = {
updateId: -1,
};

Checkout工作示例:https://stackblitz.com/edit/react-8aky3r

Answer 2

您应该尝试将索引作为参数传递并对其进行测试，而不是将状态的值更改为true或false。我添加了一个链接到使用你的类

的沙盒

import React from "react";
class GridSample extends React.Component {
constructor() {
super();
this.state = {
clicked: NaN,
items: [
{ Firstname: "Jack", Lastname: "Ali", Age: 25 },
{ Firstname: "Adam", Lastname: "Alan", Age: 55 }
]
};
this.handleOnedit = this.handleOnedit.bind(this);
this.handleCancel = this.handleCancel.bind(this);
this.handleUpdate = this.handleUpdate.bind(this);
}
handleOnedit = (event, i) => {
const par = event.target.parentNode;
const suppar = par.parentNode;
suppar.setAttribute("contenteditable", true);
suppar.focus();
this.setState({ ...this.state, clicked: i });
};
handleOndelete() {
alert("this is delete button");
}
handleCancel() {
window.location.replace(false);
}
handleUpdate(event, i) {
this.setState({ ...this.state, clicked: i });
}
render() {
console.clear();
return (
<div>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Action</th>
</tr>
{this.state.items.map((e, i) => {
return (
<tr key={i}>
<td>{e.Firstname}</td>
<td>{e.Lastname}</td>
<td>{e.Age}</td>
<td>
{!this.state.clicked === i ? (
<input
type="button"
value="Edit"
onClick={(event) => this.handleOnedit(event, i)}
/>
) : (
<input
type="button"
value="Update"
onClick={(event) => this.handleUpdate(event, i)}
/>
)}
{this.state.clicked === i ? (
<input
type="button"
value="Cancel"
onClick={(event) => this.handleCancel(event, i)}
/>
) : (
<input
type="button"
value="Delete"
onClick={(event) => this.handleOndelete(event, i)}
/>
)}
</td>
</tr>
);
})}
</table>
</div>
);
}
}
export default GridSample;

示例如下:https://codesandbox.io/s/react-class-forked-ze3o9?file=/index.js