Как обновить функцию кнопки onClick динамически? - PullRequest
Новая
       60

Как обновить функцию кнопки onClick динамически?

0 голосов
/ 30 января 2019

Я разрабатываю приложение, в котором у меня есть Bootstrap v4 Modal, рендеринг формы внутри него, чтобы получить входные данные, чтобы я мог показать их на «карточке».Эта часть в порядке, но дело в том, что я хочу использовать тот же модал для редактирования ранее вставленных данных (я нажму на карточку, и она отобразит модал с данными карточки), и вот где язастрял.Я бездельничал, пытаясь изменить его функцию, но пока не добился успеха.

Там происходит много 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">&times;</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">&times;</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;
...