Question

使用按钮我试图通过递增状态值来显示新组件，并将关键字应用于当前活动的div classname，如果它们具有与状态相同的id。

 handleSave = () => {
    this.setState({activeItemId: this.state.activeItemId + 1}, () => {

    });
  }

申请＆＃39;有效＆＃39; classname到当前活动的组件迭代。

<div className={`wrapper
        ${this.props.questions.qId == this.state.activeItemId ? 'active' : ''}
        `}>

然而，此更改仅传播到第一个div。这意味着“活跃”。从第一个div删除但它永远不会附加到第二个div。同样，如果第二个组件使用相同的qId渲染，则无法从第二个组件中删除活动组件，“活跃”＃39;仅从第一个div中删除。

你能告诉我为什么这个改变只在第一个迭代组件而不是第二个组件上注册？

编辑：我意识到按钮以某种方式绑定到每个单独的组件，因此我只能通过使用与该特定组件关联的按钮来隐藏div。我只能假设为每个组件实例化了一个新的状态对象，而我需要访问父组件的状态对象。

此代码有效：

constructor(props) {
    super(props);
    this.state = {answer: 0, activeItemId: '0' };
    this.handleSave = this.handleSave.bind(this)
  }

    handleSave = () => {
    this.setState({answer: this.state.value});
    this.setState({activeItemId: this.state.activeItemId + 1}, () => {
    });
  }

和映射

const question = Object.values(questions.questions).map((data, index) =>
<QuestionList questions={data} key={index} handleSave={this.handleSave} activeItemId={this.state.activeItemId}/>

循环遍历组件，只在第一个div

0 个答案: