es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Reaccionar: ¿Cómo acceder y cambiar el estado/atributos a través de otro componente?

19 Jul, 2023 Programación

Quiero cambiar los valores del atributo ComponentB desde ComponentA (actualmente en el índice).

Mi enfoque fue llamar a las funciones del componente inferior para cambiar su estado/valores.

import React from 'react'

class TaskComp extends React.Component{
  constructor(props){
    super(props);
    this.state = {
        name: "",
        starTime: 0,
        endTime: 0
    }
    this.changeState = this.changeState.bind(this)
    // this.changeState = this.changeName.bind(this)
  }

  changeState(newName, newStart, newEnd){
    // this.setState()
      this.state.name = newName
      this.state.starTime = newStart
      this.state.endTime = newEnd
  }
}

function changeName(newName){
  this.state.name = newName
}

function componentDidMount() {
  // this.setState(this.state)
}

function renderTask(){
  let task = new TaskComp()
  return <div> 
  <p>{Object.keys(task.state).map((key) => <div key="{key}">{key} {task.state[key]}</div>)}
  </div>
}

export default renderTask

Por ejemplo: Crear una tarea con el nombre “Paul”, los datos provienen de otro lugar como un TextField, DB…

Cuando intento hacer esto, dice que changeName o changeState no son funciones. Supongo que es porque Tasks está devolviendo un Div en lugar de la clase/objeto/datos reales. No pude acceder a través de props (asumo que es de solo lectura).

  1. ¿Qué conceptos de JS/React involucra este problema (para estudiar)?

  2. ¿Cómo lograr la solución?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    1. El problema aquí involucra los conceptos de comunicación entre componentes de React, gestión de estado y vinculación de funciones.

    2. Para lograr la solución, puedes pasar una función como prop de ComponentA a ComponentB que actualice el estado de ComponentA. Aquí tienes un ejemplo:

    En ComponentA:

    import React, { useState } from 'react';
import ComponentB from './ComponentB';

function ComponentA() {
  const [name, setName] = useState("");

  const handleOnChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <componentb setname="{setName}"></componentb>
      Nombre: {name}
    </div>
  );
}

export default ComponentA;

    En ComponentB:

    import React from 'react';

function ComponentB(props) {
  const { setName } = props;

  const handleOnClick = () => {
    setName("Paul");
  }

  return (
    <div>
      <button onclick="{handleOnClick}">Cambiar nombre a Paul</button>
    </div>
  );
}

export default ComponentB;

    En este ejemplo, la función handleOnChange() se pasa como prop setName de ComponentA a ComponentB, que luego se llama para actualizar el estado de ComponentA.

    Por lo tanto, cuando se hace clic en el botón en ComponentB, se llamará a la función handleOnClick(), que a su vez llama a la función setName() pasada desde ComponentA, actualizando finalmente el valor del estado de name.

Comments are closed.