如何在组件之外访问组件的状态数据？答案

【问题标题】：How do I access a component's state data outside of the component in react?如何在组件之外访问组件的状态数据？
【发布时间】：2023-03-10 02:21:01
【问题描述】：

我正在将 npm 库 react-flippy 用于闪存卡 Q/A 应用程序。我有一个 Q/A 对象数组作为减速器和一个随机数作为组件状态。当用户单击“下一步”按钮时，会生成一个随机数，用于确定下一个 Q/A 对象以填充卡片的正面和背面。

我遇到的问题是，如果单击“下一步”按钮时可以看到卡片的背面（答案），则卡片不会恢复到正面（问题）以获取下一个 Q/A 信息，它会停留在BackSide 揭示了问题的答案。

我查看了 react-flippy 模块，试图找到确定卡片是否翻转的变量/状态（我假设它是一个名为 isFlipped 的布尔值）。我需要在 Next 按钮调用的 randomQuestion 函数中将此变量重置为 false。如何在 Flippy-react 模块中找到执行此操作的变量/状态，以及如何在 Flippy 元素之外访问它？

react-flippy 的 Github：https://github.com/sbayd/react-flippy

我的代码：

import React from 'react';
import { connect } from 'react-redux';
import '../styles/style.css';
import Flippy, { FrontSide, BackSide } from 'react-flippy';

class MenuCards extends React.Component{
    state = {
       randomNumber: 0
    }

    randomQuestion = (arry=[]) => {
        var num = Math.floor(Math.random() * arry.length);
        this.setState({randomNumber: num});
        //-- Need to reset isFlipped back to false here...
    }

    render() {
        return(
            <div className='ui container'>
                <div style={{ margin: '2em' }} className='ui one column stackable center aligned page grid'>
                    <div style={{ margin: '2em' }} className='ui one column stackable center aligned page grid'>
                        <h1 className='ui header'>Food Menu Flash Cards</h1>
                        <div className='column twelve wide'>
                            <Flippy flipOnHover={false} flipOnClick={true} flipDirection='horizontal' ref={(r) => this.flippy = r}>
                                <FrontSide style={{ backgroundColor: 'maroon' }} id='question'>
                                    <h2 id='text' className='ui header'>Question</h2>
                                    <p id='text'>{ this.props.questionAnswer[this.state.randomNumber].question }</p>
                                </FrontSide>
                                <BackSide style={{ backgroundColor: 'maroon' }} id='answer'>
                                    <h2 id='text' className='ui header'>Answer</h2>
                                    <p id='text'>{ this.props.questionAnswer[this.state.randomNumber].answer }</p>
                                </BackSide>
                            </Flippy>
                            <button id='next-button' className='fluid ui button' onClick={() => this.randomQuestion(this.props.questionAnswer)}>Next</button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        questionAnswer: state.questionAnswer
    };
}

export default connect(mapStateToProps)(MenuCards);

【问题讨论】：

标签： javascript reactjs node-modules

【解决方案1】：

这个isFlipped 是您的Flippy 接受的道具，这意味着您可以从组件外部设置是否翻转卡片（但是，根据官方文档，您的flipOnHover 和'flipOnClick' 不会'不工作）。它没有内部状态。

阅读更多关于 React 状态和道具的信息 - 这些是基础知识。

【讨论】：