React.js使用共享的onClick函數定位單個元素

Question

我對編碼和React.js都是新手，因此非常感謝您對我做得不正確的學習有所幫助！ 我在帶有謎題的頁面上創建了多張卡片，答案是通過CSS隱藏的。 我正在使用onClick函數（“ toggleAnswer”）來切換每個答案的狀態以更改className，以便答案將可見或隱藏。 當前，onClick事件正在更改所有答案的狀態。 我意識到這是因為我的代碼沒有針對特定元素，但是我不確定如何做到這一點。 如何做到這一點？ 我的代碼當前是這樣的：

// RiddlesPage where toggleAnswer function is defined
class RiddlesPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            questionData: [],
            isHidden: true
        };
        this.getPageData = this.getPageData.bind(this);
        this.toggleAnswer = this.toggleAnswer.bind(this);
    }
    getPageData() {
        console.log("we hit getPageData function starting --");
        helpers.getRiddlesPage().then(data => {
            console.log("this is the result", data);
            this.setState({
                questionData: data[0].questionData,
            });
        });
    }
    toggleAnswer(e) {
        this.setState({ isHidden: !this.state.isHidden });
    }
    componentWillMount() {
        this.getPageData();
    }
    render() {
        const answerClass = this.state.isHidden ? "answer-hide" : "answer";
        return (
            <div>
                <Riddles>
                    {this.state.questionData.map((data, index) => {
                        return (
                            <RiddlesItem
                                key={index}
                                id={index}
                                question={data.question}
                                answer={data.answer}
                                button={data.buttonURL}
                                answerClass={answerClass}
                                onClick={this.toggleAnswer}
                            />
                        );
                    })}
                </Riddles>
            </div>
        );
    }
}
export default RiddlesPage;

// Riddles Component
import React from "react";
import "./riddles.css";
const Riddles = props => (
    <div id="riddles-row">
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div>{props.children}</div>
                </div>
            </div>
        </div>
    </div>
);
export default Riddles;

// RiddlesItem Component where onClick function is set as a prop
import React from "react";
import "./riddles.css";
const RiddlesItem = props => (
  <div>
      <div className="card-body">
            <p id="question">{props.question}</p>    
            <img
              className="img-fluid"
              id={props.id}
              src={props.button}
              onClick={props.onClick}
              alt="answer button"
            />     
        <p className={props.answerClass}> {props.answer} </p>
      </div>
  </div>
);
export default RiddlesItem;

Answer 1

您必須跟蹤狀態（以數組或其他形式）顯示的每個答案。

第一

在onclick函數中向上發送答案的索引。 在該函數中，檢查它是否存在於“ shownAnswers”數組中，然后添加或刪除它。

onClick={e => props.onClick(e, props.id)}

和

toggleAnswer(e, index) {
    if (this.state.shownAnswers.indexOf(index) > -1) {
        this.setState({
            shownAnswers: this.state.shownAnswers.filter(val => val !== index)
        });
    } else {
        this.setState({
            shownAnswers: this.state.shownAnswers.concat(index)
        });
    }
}

然后

在將類名傳遞給子組件時，請檢查其索引是否在“ shownAnswers”數組中，以確定要傳遞的類名。

answerClass={this.state.shownAnswers.indexOf(index) > -1 ? "answer" : "answer-hide"}

以您的示例為基礎，它可能看起來像這樣（未經測試）：

// RiddlesPage where toggleAnswer function is defined
class RiddlesPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            questionData: [],
            shownAnswers: []
        };
        this.getPageData = this.getPageData.bind(this);
        this.toggleAnswer = this.toggleAnswer.bind(this);
    }
    getPageData() {
        console.log("we hit getPageData function starting --");
        helpers.getRiddlesPage().then(data => {
            console.log("this is the result", data);
            this.setState({
                questionData: data[0].questionData,
            });
        });
    }
    toggleAnswer(e, index) {
        if (this.state.shownAnswers.indexOf(index) > -1) {
            this.setState({ shownAnswers: this.state.shownAnswers.filter(val => val !== index) });
        } else {
            this.setState({ shownAnswers: this.state.shownAnswers.concat(index) });
        }
    }
    componentWillMount() {
        this.getPageData();
    }
    render() {
        return (
            <div>
                <Riddles>
                    {this.state.questionData.map((data, index) => {
                        return (
                            <RiddlesItem
                                key={index}
                                id={index}
                                question={data.question}
                                answer={data.answer}
                                button={data.buttonURL}
                                answerClass={this.state.shownAnswers.indexOf(index) > -1 ? "answer" : "answer-hide"}
                                onClick={this.toggleAnswer}
                            />
                        );
                    })}
                </Riddles>
            </div>
        );
    }
}
export default RiddlesPage;

// Riddles Component
import React from "react";
import "./riddles.css";
const Riddles = props => (
    <div id="riddles-row">
        <div className="container">
            <div className="row">
                <div className="col-12">
                    <div>{props.children}</div>
                </div>
            </div>
        </div>
    </div>
);
export default Riddles;

// RiddlesItem Component where onClick function is set as a prop
import React from "react";
import "./riddles.css";
const RiddlesItem = props => (
  <div>
      <div className="card-body">
            <p id="question">{props.question}</p>    
            <img
              className="img-fluid"
              id={props.id}
              src={props.button}
              onClick={e => props.onClick(e, props.id)}
              alt="answer button"
            />     
        <p className={props.answerClass}> {props.answer} </p>
      </div>
  </div>
);
export default RiddlesItem;