"如何在 React 中更改鼠標事件的文本"

Question

我正在嘗試使用 onMouseDown 事件來響應更改文本，但它不起作用。 我看到了一個類似的代碼，它實際上有效，所以我不知道可能出了什么問題。

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;

Answer 1

setState 方法特定於您的組件，您不能使用其他方法來修改組件中的其他狀態，您可以將所有數據放在第一個狀態對象中或也使用狀態掛鈎？

"

Answer 2

您應該在類組件中只使用一個反應的狀態，這樣可以訪問 setState 並更新它。 狀態是一個對象，因此它可以在其中包含更多變量、數組甚至更多對象。 只是保持在相同的狀態，tekst 的變量

並像更新第一個狀態一樣更新它，如下所示：

 this.state = {
            index: 0,
            imgList: [img0, img1, img2, img3],
            tekst: 'pies',
        }