1

Tengo una tabla de usuarios que lleno por medio de un useEffect que trae los datos de una API, cada fila tiene un boton que abre un Dialog para agregar una suscripcion a la tabla subscription. Hay un dato que tienen en comun la tabla Users y la tabla subscription el campo Code, quisiera que cuando abra el Dialog tome el valor del campo Code de la fila a la que le dio click y lo muestre en el Dialog.

As como se muestra en la imagen, si al hacer click en la fila con el code 523 en el Dialog aparezca el valor 523.

¿Alguna idea o sugerencia para poder lograrlo?

introducir la descripción de la imagen aquí

const initialState={code:0, email:'', alias:''}

const[subscription, setSubscription]=useState(initialState);

const handleChange=(event)=>{
    setSubscription({...subscription,[event.target.name]:event.target.value})
}

const handleSubmit=(event)=>{

    event.preventDefault();

    if(!subscription.code || !subscription.email || !subscription.alias) 
        return
            const postSubscription=async()=>{
                try {
                    axios.post('/api/Subscription/add',subscription);
                    props.history.push('/Subscription'); 
                }
                catch (error) {
                    console.log('error', error);
                }
            }
            postSubscription();
} 
            <MaterialTable
            title="Users"
            columns={[
                  { title: 'Code', field: 'code' , type: 'numeric'},
                  { title: 'Name', field: 'name' },
                  { title: 'Lastname', field: 'lastname' },
                  { title: 'Age', field: 'age', type: 'numeric'},
            ]}
            data={user.Users}
            options={{     
              maxBodyHeight: '300px',
              headerStyle: { position: 'sticky', top: 0 } 
            }} 
         actions={[
                {
                  icon: 'account_box',
                  tooltip: 'Add subscription',
                  onClick:()=>{ handleClickOpen()}
                }
              ]}
          />
                  <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">
                  <DialogTitle id="form-dialog-title">Subscription/DialogTitle>
                      <DialogContent>
                          <DialogContentText>
                              Subscription
                          </DialogContentText>
                              <form onSubmit={handleSubmit} 
                                  <TextField
                                      id="filled-name"
                                      name="code"
                                      label="Code"
                                      value={subscription.code}
                                      onChange={handleChange}
                                      margin="normal"
                                      variant="outlined"
                                  />
                                  <TextField
                                      id="filled-name"
                                      label="Email"
                                      value={subscription.email}
                                      name="email"
                                      onChange={handleChange}
                                      margin="normal"
                                      variant="outlined"
                                  />
                                  <TextField
                                      id="filled-multiline-static"
                                      label="Alias"
                                      value={subscription.alias}
                                      name="alias"
                                      onChange={handleChange}
                                      margin="normal"
                                      variant="outlined"
                                  />
                                  <Button
                                      variant="contained"
                                      color="primary"
                                      type="submit">
                                      Add
                                  </Button>
                              </form>
                      </DialogContent>
                  <DialogActions>
                    <Button onClick={handleClose} color="primary">
                      Cancel
                    </Button>
                  </DialogActions>
                </Dialog>
              </div>
        );
        }
2
  • confirma que estas usando esta libreria github.com/mbrn/material-table y si la variable que tienes subscription esta en el estado o en las propiedades el 12 dic. 2019 a las 23:53
  • @VictorAlvarez, si estoy utilizando esa libreria material-table, actualice el codigo en la pregunta
    – senseilex
    el 13 dic. 2019 a las 14:57

1 respuesta 1

0

En el evento onClick que tienes en las actions puedes recibir el rowData tal como lo dice la documentación de la libreria y si lo que quieres es sacar el code de la fila lo puedes hacer actualizando el estado con setSubscription antes de abrir el Modal

actions={[
    {
        icon: 'account_box',
        tooltip: 'Add subscription',
        onClick:(event, rowData) => { 
            setSubscription({
                ...subscription,
                code : rowData.code
            })
            handleClickOpen()
        }
    }
]}
2
  • Tienes toda la razon en la documentacion viene lo del rowData y yo pensando que tenia que mandar los props en el Dialog o algo asi, gracias.
    – senseilex
    el 13 dic. 2019 a las 20:46
  • De nada amigo, recuerda la docutación es lo mas importante el 13 dic. 2019 a las 21:27

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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