#javascript #reactjs
Вопрос:
В настоящее время, когда я нажимаю на любую кнопку, все кнопки редактирования меняются на кнопки обновления, но я просто хочу запустить строку, в которой фактически было выполнено действие, без запуска какой-либо другой кнопки. Я использую приведенный ниже фрагмент кода в своем проекте 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;
Комментарии:
1. Попробуйте отобразить таблицу, используя массив для хранения имени,.., это сделает ваш код более читабельным.
Ответ №1:
Вы должны попробовать передать индекс в качестве параметра и выполнить тест на нем, вместо того, чтобы изменять значение вашего состояния на true или false.нажал (я добавил ссылку на песочницу, в которой используется ваш calss
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
Комментарии:
1. Спасибо @Zouhair, не могли бы вы также помочь мне с отменой мероприятия? Я хочу сохранить последнее обновленное состояние, а не текущие изменения.
2. @ShubhangiPant проверьте пример, в котором я добавил логику для кнопки «Отмена», и примите правильные ответы !
3. у меня это не сработало.
4. @ShubhangiPant Проверьте сейчас, я забыл сохранить изменения 🙁
Ответ №2:
В принципе, вам нужно хранить свои данные в массиве, это поможет отобразить что-то вроде таблицы:
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,
};
Рабочий пример оформления заказа:
https://stackblitz.com/edit/react-8aky3r