Estoy tratando de usar el evento onMouseDown para reaccionar para cambiar el texto, pero no funciona. Vi un código similar que realmente funcionó, así que no tengo idea de qué podría estar mal.
import React, { Component } from "react"; import "./ContentComponent.css"; class Content extends Component{ constructor(){ super() this.onClickForward = this.onClickForward.bind(this) this.onClickBack = this.onClickBack.bind(this) const img0 = require('./images/dog1.jpg'); const img1 = require('./images/dog2.jpg'); const img2 = require('./images/dog3.jpg'); const img3 = require('./images/dog4.jpg'); this.state={ index: 0, imgList: [img0, img1, img2, img3] } this.state2 = { tekst: "Pies" } } onClickForward(){ if (this.state.index + 1 === this.state.imgList.lenght) { this.setState({ index: 0 }) } else{ this.setState({ index: this.state.index +1 }) } } onClickBack(){ if (this.state.index - 1 === -1) { this.setState({ index: this.state.imgList.lenght -1 }) } else{ this.setState({ index: this.state.index - 1 }) } } zmianaTekstu() { this.setState2({ tekst: "Pies domowy - udomowiony gatunek ssaka drapieżnego z rodziny psowatych, traktowany przez niektóre ujęcia systematyczne za podgatunek wilka." }) } render(){ return( <div className="info"> <img src={this.state.imgList[this.state.index]} alt="" className="mainImage" /> <div className="btns"> <button onClick={this.onClickBack}>Poprzednie</button> <button onClick={this.onClickForward}>Następne</button> </div> <div className="textInfo"> <h3 onMouseDown={() => this.zmianaTekstu()}>Click to change text</h3> <p>{this.state2.tekst}</p> </div> </div> ) } } export default Content;TypeError no capturado: this.setState2 no es una función
El primer estado que cambia las imágenes al hacer clic en el botón realmente funciona, pero he pegado todo el código porque tal vez haya alguna interacción.
el método setState es específico para su componente, no puede usar otro método para modificar otro estado en su componente, ¿podría poner todos sus datos en el primer objeto de estado o también usar ganchos de estado?
Debe usar solo un estado de reacción en el componente de clase, de esa manera puede acceder a setState y actualizarlo. Un estado es un objeto, por lo que puede contener dentro de él más variables, matrices o incluso más objetos. simplemente mantenga dentro del mismo estado, variable para tekst
y actualícelo como actualiza el primer estado, así:
this.state = { index: 0, imgList: [img0, img1, img2, img3], tekst: 'pies', }Y luego actualice el estado cuando lo necesite, así:
this.setState({ tekst: "Pies domowy - udomowiony gatunek ssaka drapieżnego z rodziny psowatych, traktowany przez niektóre ujęcia systematyczne za podgatunek wilka." })