0

我正在使用 MDBreact 中的组件：MDBModal

当我导入这个时：

import Modal from "../Modal";

代码：

import React from "react";
import axios from "axios";
import TableData from "../TableData";
import CustomForm from "../FormCliente";
import Modal from "../Modal";
//Función que conecta un componente a Redux store.
import { connect } from "react-redux";

import { createBrowserHistory } from 'history';

class ClienteList extends React.Component {
  state = {
    DataFromApi: []
  };

  fetchArticles = () => {
    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,
    };
    axios.get("http://192.168.196.49:8000/clientes/api/").then(res => {
      this.setState({
        DataFromApi: res.data
      });
    });
  }

  componentDidMount() {
    this.fetchArticles();
   }

  componentWillReceiveProps(newProps) {
    if (newProps.token) {
      this.fetchArticles();      
    }
  }


   render() {
    console.log("Token_desde_connect:", this.props.token);
    const history = createBrowserHistory();
    const location = history.location;
    console.log("debug_1.1: ", location)


    const dummy = event => {
      console.log('mostrando dummy:', event.target.id);
    }


      const encabezado = [

        {
          label: 'Cliente',
          field: 'nombre',
          sort: 'asc',
          width: 150
        },
        {
          label: 'Fecha de alta',
          field: 'fecha_alta',
          sort: 'asc',
          width: 270
        },
        {
          label: 'Herramientas',
          field: 'usuario_id',
          sort: 'asc',
          width: 270
        }

      ];



    return (
      <div>
        <Modal requestType="post" btnText="Guardar" /> 
        <TableData data={this.state.DataFromApi} Encabezado={encabezado}/> <br />
        <h2> Create an article </h2>
        <CustomForm requestType="post" itemID={null} btnText="Create" />

        <button id="dummy" onClick={dummy}>Dummy button</button>

      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    token: state.token
  };
};

export default connect(mapStateToProps)(ClienteList);

模式代码：

import React, { Component } from 'react';
import { MDBContainer, MDBBtn, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter } from 'mdbreact';
import { Form, Input, Button, DatePicker } from "antd";
import { connect } from "react-redux";
import axios from "axios";
import { createHashHistory } from 'history'

const FormItem = Form.Item;

class ModalPage extends Component {
  state = {
    modal: false
  };

  toggle = () => {
    this.setState({
      modal: !this.state.modal
    });
  }

  handleFormSubmit = async (event, requestType, itemID) => {
    event.preventDefault();

    const postObj = {
      fecha_alta: event.target.elements.fecha_alta.value,
      nombre: event.target.elements.nombre.value,
      usuario_id: event.target.elements.usuario_id.value
    }

    axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
    axios.defaults.xsrfCookieName = "csrftoken";
    axios.defaults.headers = {
      "Content-Type": "application/json",
      Authorization: `Token ${this.props.token}`,

    };
    const history = createHashHistory();

    if (requestType === "post") {
      await axios.post("http://192.168.196.49:8000/clientes/api/create/", postObj)
        .then(res => {
          if (res.status === 201) {
            history.push("/proyectos/clientes/");


          }
        })
    } else if (requestType === "put") {
      await axios.put(`http://192.168.196.49:8000/clientes/api/${itemID}/update/`, postObj)
        .then(res => {
          if (res.status === 200) {
            history.push("/proyectos/clientes/");
          }
        })
    }
  };

  render() {
    return (
      <MDBContainer>
        {/* BUTTON */}
        <MDBBtn color="info" onClick={this.toggle}>Click</MDBBtn>
        {/* MODAL */}
        <MDBModal isOpen={this.state.modal} toggle={this.toggle}  backdrop={false}   >
          <MDBModalHeader toggle={this.toggle}>Nuevo cliente:</MDBModalHeader>
          <MDBModalBody>

          <Form
          onSubmit={event =>
            this.handleFormSubmit(
              event,
              this.props.requestType,
              this.props.itemID
            )
          }
        >
          <FormItem label="Nombre">
            <Input name="nombre" placeholder="Nombre del cliente aquí..." />
          </FormItem>
          <FormItem label="ID">
            <Input name="usuario_id" placeholder="ID del usuario" />
          </FormItem>
          <FormItem label="Fecha de Alta">
            <DatePicker name="fecha_alta" />
          </FormItem>
          <FormItem>
          <MDBBtn size="sm" color="light-blue" htmlType="submit">
              {this.props.btnText}
              </MDBBtn>
          </FormItem>
          </Form>


          </MDBModalBody>


        </MDBModal>
      </MDBContainer>
    );
  }
}

const mapStateToProps = state => {
    return {
      token: state.token
    };
  };

  export default connect(mapStateToProps)(ModalPage);

btnText 用于为模态框内的子位按钮命名。但是如何在打开模式之前更改默认名称“Clik”？

在此处输入图像描述

4

1 回答 1

0

我发现解决方案在模态中：

<MDBBtn size="sm" color="light-blue" onClick={this.toggle}>Nuevo</MDBBtn>
于 2020-03-29T18:05:56.903 回答