点击特定Zone按钮时如何在Reactstrap模态框中传递对应数据？

我来帮你搞定这个需求，分两部分来实现：点击按钮传递对应Zone数据到模态框，以及从模态框把数据回传给父组件。

一、点击按钮传递对应Zone数据到模态框 #

1. 更新组件状态 #

首先我们需要在state里新增一个selectedZone字段，用来存储当前选中的Zone数据：

constructor(props) {
    super(props);
    this.state = {
        data: Data,
        modal: false,
        selectedZone: null // 新增状态存储选中的Zone数据
    };
    this.toggle = this.toggle.bind(this);
}

2. 修改toggle方法 #

让toggle方法接收选中的Zone数据，同时切换模态框状态并保存选中的数据：

toggle(selectedItem) {
    this.setState(prevState => ({
        modal: !prevState.modal,
        selectedZone: selectedItem // 将点击的Zone数据存入状态
    }));
}

3. 优化按钮渲染（避免重复代码） #

与其手动写两个按钮，不如遍历你的data数组生成按钮，后续新增Zone也不用改代码：

{this.state.data.map(item => (
    <Button 
        key={item.Zone}
        onClick={() => this.toggle(item)} // 点击时传入当前Zone数据
        color="info" 
        size="sm" 
        block
    >
        Zone {item.Zone}
    </Button>
))}

如果坚持手动写按钮，也可以这样传值：

<Button onClick={() => this.toggle(this.state.data[0])} color="info" size="sm" block>Zone 1</Button>
<Button onClick={() => this.toggle(this.state.data[1])} color="info" size="sm" block>Zone 2</Button>

4. 在模态框中使用选中的数据 #

现在模态框里可以直接通过this.state.selectedZone获取对应数据了，比如：

<Modal isOpen={this.state.modal} toggle={this.toggle}>
    <ModalHeader toggle={this.toggle}>Zone {this.state.selectedZone?.Zone}</ModalHeader>
    <ModalBody>
        <p>Assignment ID: {this.state.selectedZone?.Assignment}</p>
    </ModalBody>
    <ModalFooter>
        <Button color="secondary" onClick={this.toggle}>Close</Button>
    </ModalFooter>
</Modal>

这里用了可选链操作符?.，避免模态框刚打开时selectedZone为null导致报错。

二、从模态框传递数据回父组件 #

如果需要在模态框里修改数据（比如编辑Assignment），再把修改后的数据传回父组件，可以通过回调函数实现：

1. 父组件定义回调方法 #

比如我们定义一个handleZoneUpdate方法，用来接收模态框传回来的更新后的数据：

handleZoneUpdate(updatedZone) {
    // 更新state里的数据源
    this.setState(prevState => ({
        data: prevState.data.map(item => 
            item.Zone === updatedZone.Zone ? updatedZone : item
        )
    }));
    // 顺便关闭模态框
    this.setState({ modal: false });
}

2. 把回调传给模态框 #

在渲染模态框时，将这个回调作为props传入：

<Modal isOpen={this.state.modal} toggle={this.toggle}>
    <ModalHeader toggle={this.toggle}>Zone {this.state.selectedZone?.Zone}</ModalHeader>
    <ModalBody>
        {/* 示例：用输入框修改Assignment */}
        <Input 
            type="text" 
            defaultValue={this.state.selectedZone?.Assignment}
            ref={(input) => this.assignmentInput = input}
        />
    </ModalBody>
    <ModalFooter>
        <Button 
            color="primary" 
            onClick={() => {
                // 构造更新后的Zone数据
                const updatedZone = {
                    ...this.state.selectedZone,
                    Assignment: this.assignmentInput.value
                };
                // 调用回调传递数据
                this.handleZoneUpdate(updatedZone);
            }}
        >
            Save Changes
        </Button>
        <Button color="secondary" onClick={this.toggle}>Close</Button>
    </ModalFooter>
</Modal>

如果你的模态框是独立的子组件，只需在子组件里通过props.handleZoneUpdate(updatedData)传递数据即可。

这样就完成了双向的数据传递啦～

内容的提问来源于stack exchange，提问作者Jydon Mah