Очень хорошо. Я пытаюсь показать данные таблицы в модале, и я не могу сделать модал, чтобы открыть модал со всеми данными билета, выбранными в таблице.
Я работаю с Boostrap 4 для визуальной части, и я хочу использовать обычный стол.
Мне удалось сделать то, что я хочу, с такими компонентами, как MuiDatatable или React-boostrap, но я не хочу использовать такие компоненты
, поэтому я переношу свои данные в массив данных:
class TicketsContainer extends React.Component {
state = {
data: []
}
constructor() {
super();
this.apiUrl = process.env.REACT_APP_API_URL || 'https://localhost:5050';
this.getData = this.getData.bind(this);
}
componentDidMount() {
this.getData();
}
getData() {
Axios.get(`${this.apiUrl}/tickets`)
.then(result => this.setState({ ...this.state, data: result.data }))
.catch(error => alert(error.message));
}
Здесь я отображаю данные и показываю их в таблице
{this.state.data.length && (
<div>
{this.state.data.map((ticket) => {
return (
<div className="card">
<div className="card-header">
<div className="row align-items-center">
<div className="col">
<form className="row align-items-center">
<div className="col-auto pr-0">
<span className="fe fe-search text-muted" />
</div>
<div className="col">
<input
type="search"
className="form-control form-control-flush search"
placeholder="Inngresa el #numero de ticket aqui..."
/>
</div>
</form>
</div>
</div>
{/* / .row */}
</div>
<div className="table-responsive">
<table className="table table-sm table-nowrap card-table table-hover ">
<thead>
<tr>
<th>
<div className="custom-control custom-checkbox table-checkbox">
<input
type="checkbox"
className="custom-control-input"
name="ordersSelect"
id="ordersSelectAll"
/>
<label
className="custom-control-label"
htmlFor="ordersSelectAll"
>
</label>
</div>
</th>
<th>N°: Ticket</th>
<th>Contrato</th>
<th>Empresa</th>
<th>Problema</th>
<th>Estado</th>
<th colSpan={2}>Tecnico Asignado</th>
</tr>
</thead>
<tbody className="list">
<tr id={ticket._id}>
<td>
<div className="custom-control custom-checkbox table-checkbox">
<input
type="checkbox"
className="custom-control-input"
name="ordersSelect"
id="ordersSelectOne"
/>
<label
className="custom-control-label"
htmlFor="ordersSelectOne"
>
</label>
</div>
</td>
<td className="orders-order">
{'#' + ticket.ticketNumber}
</td>
<td className="orders-product">{ticket.contract.name}</td>
<td className="orders-date">
{ticket.contract.compant.name}
</td>
<td className="orders-total">{ticket.issue}</td>
<td className="orders-status">
<div className="badge badge-soft-info">
{ticket.status}
</div>
</td>
<td className="orders-method">
{ticket.assignedTechnical}
</td>
</tr>
</tbody>
</table>
</div>
</div>
);
})}
</div>
)}
Как выбрать строку из таблицы и показать мне данные в модальном режиме?
Я тестировал несколько вещей и я не могу этого сделать
то, что ты можешь делать, чтобы получать ticket, который выбрал пользователь, состоит setear событие onClick
(например) и в том, чтобы перемещать его функцию, которую получал бы как параметр ticket, я помещаю тебе пример:
Для, когда они кликнут в линии:
<tr id={ticket._id} onClick={() => this.handleRowClick(ticket)}>
Для этого ты будешь должен объявлять в твоем классе этот метод таким же образом как ты заявил;
this.getData = this.getData.bind(this);
this.handleRowClick = this.handleRowClick.bind(this);
И в этом методе ты манипулируешь ticket, для которого ты нуждался после того, как пользователь кликнул.
handleRowClick(ticket) {
// Aqui realizas la lógica para abrir el modal pasándole el ticket seleccionado.
}
Надеялся, что он подает тебя, привет!