Soy nuevo en React y me pregunto si se puede actualizar el contenido de otro componente en función de los eventos de otro componente.
Tengo dos componentes de reacción. Uno de los componentes obtiene sus datos cargados cuando se carga la página y el otro componente debe tener sus datos representados en función del método onClick de los primeros componentes.
Uno de los componentes obtiene sus datos cargados desde una API, que luego muestro en una lista. Luego tengo un método que debería manejar los elementos en los que se hizo clic llamado itemClicked , cuando se hace clic en un elemento, los datos en el otro componente deberían actualizarse.
itemClicked = () => { // Get the ID of the clicked item, and use it in the other component console.log(e.target.attributes[0].value); } // ... <ul> {items.map(item => ( <li onClick={this.itemClicked} key={item._id} itemID={item._id}> {item.name} </li> ))} </ul>Ahora bien, esta podría ser una mala pregunta, pero soy nuevo en React y estoy tratando de aprender un poco más sobre los estados y accesorios.
Editar.
Este es el componente principal donde cargo los dos componentes:
class Dashboard extends React.Component { constructor(props) { super(props); this.state = { currentItem: {} } } onItemClick(item) { this.setState({ currentItem: item }) } render() { return <> <div className='dashboard'> <div className='dashboard__wrapper'> <SelectItem onItemClick="{this.onItemClick}" /> <EditItem item="{this.state.currentItem}" /> </div> </div> </> } } export default DashboardTambién actualicé el componente SelectItem:
itemClicked = (e) => { console.log(e.target.attributes[0].value); if (this.props.onItemClick) { this.props.onItemClick(e.target.attributes[0].value) } }Pero ahora se queja de que esta línea:
this.props.onItemClick(e.target.attributes[0].value)no es una función:
Uncaught TypeError: this.props.onItemClick is not a functionSeguro que puede.
Si el componente de lista y el componente de vista están ambos en el mismo componente principal. El componente principal puede tener una propiedad de estado, por ejemplo, currentItem . El currentItem se establecerá pasando una devolución de llamada como propiedad al componente de la lista. La devolución de llamada debe llamarse cuando se hace clic en el elemento de la lista.
//List Component itemClicked = () => { // Get the ID of the clicked item, and use it in the other component console.log(e.target.attributes[0].value); //call the callback if(this.props.onItemClick){ this.props.onItemClick(e.target.attributes[0].value) } } ... <ul> {items.map(item => ( <li onClick={this.itemClicked} key={item._id} itemID={item._id}> {item.name} </li> enter code here ))} </ul>Componente de página
this.state = { currentItem: {} } onItemClick(item){ this.setState({ currentItem: item }) } render(){ return <> <ListComponent onItemClick={this.onItemClick} /> <ViewComponent item={this.state.currentItem} /> </> }