Quiero cambiar los valores del atributo ComponentB del ComponentA (índice actualmente).
Mi enfoque fue llamar a funciones de componentes inferiores 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>)}</p> </div> } export default renderTaskPor ejemplo: cree una tarea con el nombre "Paul", datos provenientes de otro lugar como un TextField, DB ...
Cuando trato de hacer esto, dice que changeName o changeState no son funciones. Supongo que porque Tasks está devolviendo un Div en lugar de la clase/objeto/datos reales. No pude acceder a través de accesorios (supongamos que es de solo lectura).
1.Qué conceptos de JS/React involucran este problema (a estudiar)
2.¿Cómo lograr la solución?
Gracias Andy por la ayuda. Cambié para devolver toda la clase y terminé con esto.
task.setState("Moe", 12,30) <p>{task.render()}</p> import React from 'react' class Task 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) } setState(newName, newStart, newEnd) { // this.setState() this.state.name = newName this.state.starTime = newStart this.state.endTime = newEnd } componentDidMount() { } render(){ return <div> {Object.keys(this.state).map((key) => <div key={key}>{key} {this.state[key]}</div>)} </div> } } export default Task