Question

我有这个问题，我想一次扩展一个问题我的问题是：当我扩展问题时，所有问题都同时被搁置请帮我解决这个问题

我是Reacte本机的新手，我试图映射并返回视图，但它不起作用

这是图片：





export default class AccordionHeaderContentStyleExample extends Component {


  state = {
    outerCollapse: true,
    innerCollapse: true,
  };

  render() {

    return (

        <View style={styles.container}>

            <Button
              title={this.props.data.name}      
              onPress={() =>
              this.setState({ outerCollapse: !this.state.outerCollapse })}
            />
            <Collapsible collapsed={this.state.outerCollapse}>

                 {questions.map(e=>
                  <View>
                    <Button 
                       title={e.name}
                       color="#42f4eb" 
                       onPress={() => this.setState({ innerCollapse: !this.state.innerCollapse })}/>        
                     <Collapsible collapsed={this.state.innerCollapse}>
                           <Text style={styles.center}>Reponse</Text>
                      </Collapsible>
                   </View>
                     )} 

            </Collapsible>

      </View>

    );
  }
}

我希望一次扩展一个问题。实际情况是我单击时，所有问题都在扩展

Answer 1

对于每个问题，您都将innerCollapse设置为相同。我建议为该值使用ID而不是布尔值。

// function outside of render
toggleQuestion = (id) =< {
    this.setState((prevState) =< {
        const isOpen = prevState.innerCollapse === id;
        return ({ innerCollapse: isOpen ? null : id });
    })
}

// Button associated with each question
onPress={() => this.toggleQuestion(question.id)}

// inner Collapsible
collapsed={this.state.innerCollapse !== question.id}

如果点击的问题已经打开，则会将其关闭，否则会将innerCollapse设置为点击的问题的ID。

可折叠的问题，我想一次只打开一个问题

1 个答案: