我正在开发一个应用程序，其中有一个 Bootstrap v4 模式，在其中呈现一个表单以获取输入数据，以便我可以在“卡片”上显示它。这部分没问题，但问题是，我想使用相同的模态来编辑之前插入的数据（我将在卡片中单击，它将使模态与卡片数据一起出现），这就是我的位置卡住。我一直在试图改变它的功能，但还没有成功。
有很多 console.log 正在进行，因为我仍在学习并不断输出我的代码卡在哪里。
好的，这是主要组件：
import React from 'react';
import './TaskColumn.css';
import $ from 'jquery';
import BtnNewTask from '../BtnNewTask/BtnNewTask';
import ToastTask from '../ToastTask/ToastTask';
import ModalTask from '../ModalTask/ModalTask';
class TaskColumn extends React.Component{
state = {
tasks: [],
novaTarefa : true
};
// Função chamada ao clicar em CONFIRMAR ao cadastrar uma nova tarefa
newTask = () => {
const form = document.getElementById('formTarefa');
var formValido = true;
// Verificando se todos os campos foram preenchidos
for(var i=0; i < form.elements.length; i++){
if(form.elements[i].value === '' && form.elements[i].hasAttribute('required')){
formValido = false;
break;
}
}
if(formValido){
// Cria uma nova tarefa
var novaTarefa = {
'Titulo': `(${document.getElementById('nomeCliente').value}) ${document.getElementById('modelo').value}`,
'Modelo': document.getElementById('modelo').value,
'Cliente':document.getElementById('nomeCliente').value,
'Descricao':document.getElementById('descricao').value,
'DataPedido': document.getElementById('criacao').value,
'DataEntrega': document.getElementById('entrega').value,
'Estado': 0
}
// Adiciona a nova tarefa no array de objetos salvos no ESTADO do componente
var state = this.state.tasks;
state.push(novaTarefa);
// Atualiza o ESTADO do componente
this.setState(
{
tasks: state,
novaTarefa: this.state.novaTarefa
}
);
$('#modalNewTask').modal('hide');
}else{
// Mostrar mensagem de erro
$('#erroPreenchimento').addClass('show');
window.setTimeout(()=>{
document.getElementById('erroPreenchimento').classList.remove('show');
}, 2000);
}
}
editTask = () => {
console.log("Editando a tarefa...");
}
updateButton = () => {
var stateTemporario = this.state;
stateTemporario.novaTarefa = false;
// console.log(stateTemporario.novaTarefa);
this.setState(stateTemporario);
// console.log(this.state);
}
render(){
return (
<div className="col col-md-4">
<div className="card">
<div className="card-header">
{this.props.title}
</div>
{/* Se houver alguma tarefa salva irá renderiza-las */}
{this.state.tasks.length > 0 &&
<div className="card-body">
{
this.state.tasks.map(
(task, i) => {
return (
<ToastTask task={task} i={i} key={i} onClick={this.updateButton}/>
);
}
)
}
</div>
}
{/* Se a coluna recebe o título Disponível, então renderiza o botão para adicionar uma nova tarefa */}
{this.props.title === "Disponível" &&
<BtnNewTask />
}
<ModalTask newTask={this.newTask} editTask={this.editTask} novaTarefa={this.state.novaTarefa} />
</div>
</div>
);
};
}
export default TaskColumn;
这是模态：
import React from 'react';
import './ModalTask.css';
class ModalTask extends React.Component {
state = {
novaTarefa: true
}
componentDidUpdate(){
console.warn("ModalTask DidUpdate");
console.log(this.props.novaTarefa);
console.log(this.state.novaTarefa);
// this.setState({novaTarefa: this.props.novaTarefa});
}
render (){
return (
<div className="modal fade" id="modalNewTask" tabIndex="-1" role="dialog" aria-labelledby="modalNewTask" aria-hidden="true">
<div className="alert alert-warning fade" id="erroPreenchimento" role="alert">
Preencha <strong>todos</strong> os campos!
<button type="button" className="close" aria-label="Close" onClick={()=>{document.getElementById('erroPreenchimento').classList.remove('show');}}>
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-dialog modal-dialog-centered" role="document">
<div className="modal-content">
<div className="modal-header">
<h5 className="modal-title">Nova Tarefa</h5>
<button type="button" className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div className="modal-body">
<div className="container-fluid">
<form id="formTarefa">
<div className="form-row">
<div className="col">
<div className="form-group">
<label htmlFor="nomeCliente">Cliente</label>
<input type="text" className="form-control" id="nomeCliente" placeholder="José Souza" required/>
</div>
</div>
<div className="col">
<div className="form-group">
<label htmlFor="modelo">Modelo do aparelho</label>
<input type="text" className="form-control" id="modelo" placeholder="Lenovo Ideapad 310" required/>
</div>
</div>
</div>
<div className="form-group">
<label htmlFor="descricao">Descrição</label>
<textarea className="form-control" id="descricao" rows="5" defaultValue={"Relatório:\n\nObservações:"} required></textarea>
<small className="form-text text-muted">
Sua descrição deve ser precisa para facilitar a manutenção e lembre-se de informar os problemas relatados pelo cliente.
</small>
</div>
<div className="form-row">
<div className="col">
<div className="form-group">
<label htmlFor="criacao">Data do pedido</label>
<input type="date" id="criacao" style={{'width':'100%'}} required/>
</div>
</div>
<div className="col">
<div className="form-group">
<label htmlFor="entrega">Data de entrega</label>
<input type="date" id="entrega" style={{'width':'100%'}} required/>
</div>
</div>
</div>
</form>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-danger" data-dismiss="modal">Cancelar</button>
{/* Here is where I try to render the proper button */}
{this.state.novaTarefa ? (
<button type="button" className="btn btn-success" id="botaoConfirmar" onClick={this.props.newTask}>Confirmar {console.warn("Botão Nova tarefa")}</button>
) : (
<button type="button" className="btn btn-success" id="botaoConfirmar" onClick={this.props.editTask}>Confirmar {console.warn("Botão Editar tarefa")}</button>
)}
</div>
</div>
</div>
</div>
);
}
}
export default ModalTask;