javascript - 轮播箭头也会更改 div react.js 中的文本

Question

我正在制作一个字符选择屏幕，我希望引导轮播箭头也更改滚动中的文本以匹配每个字符。现在滚动是一个单独的组件，但我愿意将它们放在同一页面上。

我试图通过“活动”类来获取它，因为它带有引导轮播并从 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

提前致谢！！

标签： javascriptreactjscarousel