2

Hola estoy haciendo un proyecto en React + apolloGraphQl + mongoDB y quiero programar la edición directa de los campos de la tabla. Pero cuando doy click en el campo que quiero editar se me dispara la acción en la columna completa. A continuación pongo las imágenes y el código que tengo.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

import React, { Component } from 'react';

import gql from 'graphql-tag';
import { Query, Mutation } from 'react-apollo';

const GET_CURRENT_USER = gql`
  {
    products {
      _id
      name
      description
      price 
    }
  }`;

const DELETE_CURRENT_PRODUCT = gql`
  mutation Deleteproduct($_id: String) {
    deleteproduct(_id: $_id) {
      _id
      name
      description 
      price 
    }
  }`;

const UPDATE_CURRENT_PRODUCT = gql`
  mutation Updateproduct($_id: String, $name: String, $description: String, $price: String, $image: String){
    updateproduct(_id: $_id, name: $name, description: $description, price: $price, image: $image) {
      _id
      name
      description 
      price 
    }
  }`;


class Profile extends Component {
  constructor(props) {
    super(props);
    this.state = {
      campoVisible: false,
      inputVisible: true
    }
  }

  handleVisibility = (e) => {
    console.log(e.target);
    this.setState({ campoVisible: !this.state.campoVisible });
    this.setState({ inputVisible: !this.state.inputVisible });
  }

  render() {
    return (
    <Query query={GET_CURRENT_USER} pollInterval={500}>
      {({ loading, error, data, startPolling, stopPolling }) => {
        // const { products, product } = data;
        // const { books } = data;
        // console.log( books )
        if (loading) return "Loading...";
        if (error) return `Error!: ${error}`;

        return (
          <div>
            <h2>Listado de productos en la base de datos MongoDB</h2>
            <table id="customers">
              <thead>
                <tr>
                    <th >Nombre</th>
                    <th>Descripción</th>
                    <th>Precio en USD</th>
                    <th>Acción </th>
                </tr>
              </thead>
              <tbody>    
                {data.products.map((product, key) => {
                  return  <tr key={key} >
                    <td onClick={this.handleVisibility}>
                      <p hidden={this.state.campoVisible} value='test'>{product.name}</p>
                      <p hidden={this.state.inputVisible}>
                        <input value={product.name} />
                      </p>
                    </td> 
                    <td>{product.description}</td>
                    <td>{ "$" + product.price}</td>
                    <Mutation  mutation={DELETE_CURRENT_PRODUCT}>
                    {(deleteproduct, { data }) => (
                      <td><button onClick={() => deleteproduct({variables: {_id: product._id }})}>Eliminar</button></td>
                    )}
                    </Mutation>                 
                  </tr>
                })}  
              </tbody>
            </table>
          </div>
        );
      }}
    </Query>);    
  }
}

export default Profile;
3
  • Lo que te sucede es sencillo identificar, porque tienes un solo estado para manejar las ediciones, para solucionarlo, debería ser un estado por cada campo, ya te voy a dar una respuesta con el ejemplo Commented el 30 ago. 2018 a las 20:39
  • Gracias German en breve lo pruebo y te comento resultados Commented el 31 ago. 2018 a las 15:58
  • Si te ha funcionado la respuesta no olvides calificar y marcar como respondida Commented el 31 ago. 2018 a las 17:06

1 respuesta 1

2

Lo que necesitas cambiar es el método handleVisibility y verificar cual es el campo al que se hizo click, para que solo sea ese el que se modifique y vuelva a hacer render:

handleVisibility = (e, id) => {
  const mayEdit = this.state.edit[`input-${id}`] || false
  this.setState({
    edit: Object.assign({}, this.state.edit, { [`input-${id}`] : !mayEdit })
  })
}

Agregamos en nuestro state un nuevo objeto, y luego hacemos lo necesario en el render:

constructor(props) {
  super(props)
  this.state = {
    campoVisible: false,
    inputVisible: true,
    edit: {}
  }
}

render() {
  ...
  return <tr key={key}>
    <td onClick={ (e) => this.handleVisibility(e, product._id) }>
      <p>{ this.state.edit[`input-${product._id}`] ? <input value={ product.name } /> : product.name }</p>
    </td> 
    <td>{ product.description }</td>
    <td>{ "$".concat(product.price) }</td>
  ...
}

Lo que hice fue reemplazar el contenido de tu etiqueta p simplemente si está en el estado de editar se muestra el input, de lo contrario se muestra el nombre. La desventaja es que si se renderiza el nombre, no lo hace el input, así que dentro de un formulario, si tienes que enviar el campo con un nombre específico te podría causar un error. Pero estoy seguro que no es tu caso

Cualquier duda, o error con el código, puedes comentarme y te ayudaré a corregir hasta que soluciones tu duda

1
  • Gracias German ahora si logro el objetivo de marcar solo una celda. ya voy a programar el formulario editar con apollographql a ver si me actualiza bien. Commented el 31 ago. 2018 a las 17:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.