Question

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

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

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

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

我试图将状态放入子组件（LockedCard）中，但这种方法不起作用，所以我将状态“ locked：true”发送回了父组件（Home.js）

我目前正在读取该卡已被锁定，但是当我单击锁定图标时，什么都没有发生。我有一个clickHandler来处理单击锁定图标时的情况，它是一个按钮，并且在过去能够解锁所有卡时已经起作用（如前所述，这并不是预期的目标，但可以证明clickHandler应该可以工作）

Parent（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>

Child（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;

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

1 个答案: