当我有该组件的多个版本时，如何影响一个单独组件（卡）的状态？

Question

目前的情况：我有一个名为LockedCard的卡组件。 LockedCard通过使用存储的数据库信息进行映射来呈现给页面。在Home.js上存在这些多张卡片。因此它作为自身的多个单独版本呈现给页面。在Home.js我有锁定状态：true。这会导致每张卡在渲染时显示为锁定，并带有可点击的锁定图标。

预期目标：当我点击LockedCard上的锁定图标时，我需要程序显示安全问题（单独的组件称为SecurityCard）。它应该只为那张单卡做这件事。

当前问题：当我单击锁定图标时，它会将屏幕上的每张卡更改为SecurityCard组件。我需要它只更改我点击的一张卡，而不是程序中的每张卡。

这是在PC Windows上进行的，我使用的是普通的React，而不是原生的。

我试图将状态放在子组件（LockedCard）中并且不起作用，所以我将状态“locked：true”发送回父组件（Home.js）

我目前已经知道该卡被锁定但是当我点击锁定图标时没有发生任何事情。我有一个clickHandler，可以在点击锁定图标时进行处理，这是一个按钮，并且在我能够解锁所有卡片时已经工作了（如前所述，这不是预期的目标，但证明了clickHandler应该工作）

家长（Home.js）

class Home extends Component {

  state = {
    title: "",
    note: "",
    modal: [],
    attempts: 3,
    isCorrect: false,
    locked: true,
    answer: '',
    noteTotal: 0,
    modalOpen: false
  };

}
=============
  handleLockButtonClick = () => {
    this.setState({
      locked: false
    })
  }

=============

 {this.state.locked ? (
            <Grid.Row stackable columns={3}>
            {this.state.modal.map((card) => {
              return (
              <GridColumn>
                <LockedCard
                  handleLockButtonClick={this.handleLockButtonClick}
                  title = {card.title}
                  notes = {this.state.noteTotal}
                  locked = {this.state.locked}
                />
              </GridColumn>
              )
            })}
            </Grid.Row>
          ) : (
              this.state.isCorrect ? (
                <Grid.Row stackable columns={3}>
                  {this.state.modal.map((card) => {
                    return (
                      <GridColumn>
                        <PassCard
                          title={card.title}
                          note={card.note}
                        />
                      </GridColumn>
                    )
                  })}
                </Grid.Row>
              ) : (
                  <Grid.Row stackable columns={3}>
                    {this.state.modal.map((card) => {
                      return (
                        <GridColumn>
                          <SecurityCard
                            handleAnswerInput={this.handleAnswerInput}
                            title = {card.title}
                            name="answer"
                            value={this.state.answer}
                            handleAnswerSubmit={this.handleAnswerSubmit}
                            question={securityArray[0].question}
                            attempts = {this.state.attempts}
                          />
                        </GridColumn>
                      )
                    })}
                  </Grid.Row>
                  )
              )}
        </Grid>

儿童（LockedCard）

class LockCard extends Component {
    render() {
        return (
            <Card centered locked={this.props.locked}>
                <Card.Content header={this.props.title} />
                <Card.Content className="card-center" description="Click the lock to answer a question and unlock this cards information" />
                <button id="lock-btn" className="ui primary button lock-button" onClick={() => this.props.handleLockButtonClick}><i className="fas fa-lock"></i></button>
                <Card.Content className="dark" extra>
                    <Icon name='clipboard' />
                    {this.props.notes} Notes
            </Card.Content>
            </Card>
        )
    }
}
export default LockCard;

预期：将锁定状态更改为false时，仅在单击的特定卡上发生

实际结果：所有卡都有变化

Answer 1

我会创建一个卡组件，其中包含安全卡和锁定卡的UI，并保持该组件中的状态。该状态将决定它呈现的UI

例：

class MainCard extends Component {
    state = {
        locked: true
    }

    handleLockButtonClick = () => {
        this.setState({
          locked: false
        })
      }

    renderLockedCard = () => {
        return (
            <Card centered locked={this.props.locked}>
            <Card.Content header={this.props.title} />
            <Card.Content className="card-center" description="Click the lock to answer a question and unlock this cards information" />
            <button onClick={handleLockBtnClick} id="lock-btn" className="ui primary button lock-button"><i className="fas fa-lock"></i></button>
            <Card.Content className="dark" extra>
                <Icon name='clipboard' />
                {this.props.notes} Notes
        </Card.Content>
        </Card> 
        )
    }

    renderUnlockedCard = () => {
        <Card centered locked={this.props.locked}>
        {/* Unlocked Card Content */}
    </Card>
    }
    render() {
       return this.state.locked ? this.renderLockedCard() : this.renderUnlockedCard()
    }
}
export default MainCard;