如何在React Native中以模式显示动态文本？

Question

这是我的代码。希望你能理解。

class SuperAdmin extends Component {
    state = {
        modalVisible: false,
        organizationNames: [ 
            {
                 "id": 1,
                "name": "Org 1",
                "activated": true
            }, 
            {
                "id": 2,
                "name": "Org 2",
                "activated": false
            }
        ]
    };

    setModalVisible(visible) {
        this.setState({modalVisible: visible});
    }

    render() {
        return (
            <Block style={ styles.blockStyle }>
                <Header title="Organizations" />
                <ScrollView>
                    { this.state.organizationNames.map((item, index) => { 
                        return (
                            <TouchableOpacity onPress={() => this.props.navigation.navigate('OrganizationMembers')}>
                                <Card borderless shadow style={ styles.cardStyle }>
                                    <Block style={ styles.spaceBetween}>
                                        <Block>
                                            <Text h5 style={ styles.textStyle }>{item.name}</Text>
                                            <Text muted>{item.activated ? 'Activated' : 'Deactivated'}</Text>
                                        </Block>
                                        <Block>
                                            <Button 
                                                round 
                                                size="small" 
                                                style={ item.activated ? styles.btnOn : styles.btnOff } 
                                                onPress={() => { this.setModalVisible(true);}}  
                                            >
                                                { item.activated ? 'Online' : 'Offline' }
                                            </Button>
                                            <Modal
                                                animationType="slide"
                                                transparent={false}
                                                visible={this.state.modalVisible}
                                            >
                                            <Block style={ styles.myModal }>
                                                <Card style={ styles.myCard }>
                                                    <Text style={ styles.modalTextStyle}>

                                                        { item.activated ? 'Do you want to make this organization offline ' : 'Do you want to make this organization online ' }
                                                        ?
                                                    </Text>

                                                </Card>

                                            </Block>
                                        </Modal>
                                    </Block>
                                </Block>

                            </Card>
                        </TouchableOpacity>
                    )
                }
                )}
            </ScrollView>

        </Block>
    );
}
}

我已经创建了一个组件，单击按钮后会在该组件中打开一个模式。有两个按钮。一个是在线按钮。另一个是离线按钮。当我单击在线按钮时，我想以以下方式显示此文本：“您要使该组织脱机吗”。当我单击脱机按钮时，我想在模式“您是否要使该组织在线”中显示此文本。

但是我单击的任何按钮在模型中都显示相同的文本："Do you want to make this organization online".如何解决此问题？

谢谢。

Answer 1

这是因为您已经渲染了多个模态。

您在循环中使用了模态，所以会像这样，

<TouchableOpacity  ....
 ....
 ...
 for 0th index
....
<Modal>
....
</Modal>
</TouchableOpacity>
<TouchableOpacity  ....
 ....
 ...
 for 1st index
....
<Modal>
....
</Modal>
</TouchableOpacity>

内部会在那儿。现在每个模态分量都在那儿，所以只有一个状态可见。

所以每个模式都在那儿打开，但最后一个在上面。

所以您需要从循环中删除模态，将其放在外面，

以及您希望根据条件放入模态的任何详细信息，将它们设置为状态。

例如，获取名为状态的消息，并在单击按钮时使用setState更改此状态。

Answer 2

您以错误的方式渲染Modal，为seletedItem创建状态，onPress使用当前项目设置状态...使用以下代码...

state = {
    modalVisible: false,
    organizationNames: [
      {
        id: 1,
        name: 'Org 1',
        activated: true,
      },
      {
        id: 2,
        name: 'Org 2',
        activated: false,
      },
    ],
    selectedItem: null,
  };

  setModalVisible(visible, item) {
    this.setState({ modalVisible: visible, selectedItem: item });
  }

  render() {
    return (
      <Block style={styles.blockStyle}>
        <Header title="Organizations" />
        <ScrollView>
          {this.state.organizationNames.map((item, index) => {
            return (
              <TouchableOpacity
                onPress={() =>
                  this.props.navigation.navigate('OrganizationMembers')
                }>
                <Card borderless shadow style={styles.cardStyle}>
                  <Block style={styles.spaceBetween}>
                    <Block>
                      <Text h5 style={styles.textStyle}>
                        {item.name}
                      </Text>
                      <Text muted>
                        {item.activated ? 'Activated' : 'Deactivated'}
                      </Text>
                    </Block>
                    <Block>
                      <Button
                        round
                        size="small"
                        style={item.activated ? styles.btnOn : styles.btnOff}
                        onPress={() => {
                          this.setModalVisible(true, item);
                        }}>
                        {item.activated ? 'Online' : 'Offline'}
                      </Button>
                    </Block>
                  </Block>
                </Card>
              </TouchableOpacity>
            );
          })}
        </ScrollView>

        <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}>
          <Block style={styles.myModal}>
            <Card style={styles.myCard}>
              <Text style={styles.modalTextStyle}>
                {!this.state.selectedItem?.activated
                  ? 'Do you want to make this organization offline '
                  : 'Do you want to make this organization online '}
                ?
              </Text>
            </Card>
          </Block>
        </Modal>
      </Block>
    );
  }