Javascript 旋转木马箭头还会更改div react.js中的文本

我正在制作一个字符选择屏幕，我想引导旋转木马箭头也改变滚动中的文本，以匹配每个字符。现在卷轴是一个单独的组件，但我愿意把它们放在同一页上

我试图通过类“active”来获取它，因为它随引导旋转木马一起出现，并从data.json中填充，但它不起作用。也欢迎其他（希望更容易）的想法

    state = {
        data: characters,
        curCharacter: {},

    }
    componentDidMount() {
        var cur = this.state.data[0].description;
        this.setState({ curCharacter: this.state.data[0] });
        console.log(this.state.curCharacter)
    }

    characterSelect = (e) => {
        e.preventDefault()
        var cur = document.getElementsByClassName("active")
        console.log("activ1", cur)
        var newClass = cur[0].children[0].alt
        console.log("activ2", newClass);
        var arr = this.state.data;
        console.log(arr);
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i], arr[i + 2]);
            if (newClass == arr[i].class) {
                this.setState({ curCharacter: arr[i] });
                console.log(this.state.curCharacter)
            }
        }
    }

    render() {
        return (
            <div className="charContain">
                <div className="row">
                    <div className="col-md-6">

                        <div id="carouselExampleControls" class="sprite carousel slide" data-ride="carousel" data-interval="false" >
                            <div class="carousel-inner">
                                <div class="carousel-item active">
                                    <img class="d-block h-100" src="https://i.imgur.com/ODs4zDn.gif" alt="Warrior" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/huVIPkL.png" alt="Archer" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/bKvuY6T.png" alt="Warrior" />
                                </div>
                                <div class="carousel-item">
                                    <img class="d-block h-100" src="https://i.imgur.com/pIHmyE4.png" alt="Mage" />
                                </div>
                            </div>
                            <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
                                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                                <span class="sr-only">Previous</span>
                            </a>
                            <a class="carousel-control-next" onClick={this.characterSelect} href="#carouselExampleControls" role="button" data-slide="next">
                                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                                <span class="sr-only">Next</span>
                            </a>
                        </div>

                        <button onClick={handleButtonChoose} className="choose">Choose Character</button>

                    </div>
                    <div className="col-md-6">
                        <Scroll
                            text={this.state.description}
                        />
                    </div>
                </div>

            </div>
        )
    }
}

export default Character

状态={
数据：个字符，
字符：{}，
}
componentDidMount（）{
var cur=this.state.data[0]。说明；
this.setState（{curCharacter:this.state.data[0]}）；
console.log（this.state.curCharacter）
}
字符选择=（e）=>{
e、 预防默认值（）
var cur=document.getElementsByClassName（“活动”）
console.log（“activ1”，cur）
var newClass=cur[0]。子项[0]。alt
console.log（“activ2”，newClass）；
var arr=this.state.data；
控制台日志（arr）；
for（设i=0；i

---

提前谢谢

你能确切地说明什么不起作用吗？对于显示的代码，

元素引用状态的未定义属性。您是对的，我忘了在工作时更改了状态。但是，我要修复的不起作用的部分能够在每次单击旋转木马箭头时更改this.state.description，以便每个字符都有匹配的描述。谢谢如果不确定如何设置，请尝试在设置当前字符的相同位置设置描述（更改

this.setState（{curCharacter:arr[i]}）；

in

characterSelect（）

以包含描述，例如

this.setState（{curCharacter:arr[i]，description:arr[i].description}）；

）。如果你试过，但它不起作用，告诉我们为什么它不起作用