reactjs - 单击特定按钮 ID 时，如何在 reactstrap 模式中传递数据？

Question

如果单击特定按钮区域 ID，我如何从我的模式中传递数据？例如，我有下面列出的对象并有 2 个按钮。如何将我的区域传递给相应的按钮？

这是我如何定义我的状态。

 constructor(props) {
    super(props);
    this.state = {
        data: Data,
        modal: false
    };
    this.toggle = this.toggle.bind(this);
}


toggle(item) {
    this.setState({
      modal: !this.state.modal
    });
}

这是我渲染的按钮。两次。

<Button onClick={this.toggle} color="info" size="sm" block>Zone 1</Button>
<Button onClick={this.toggle} color="info" size="sm" block>Zone 2</Button>

这是数据。

data:[{
    "Assignment": "52041",
    "Zone": "1"
},
{
    "Assignment": "52042",
    "Zone": "2"
}]

Answer 1

您可以传递数据 onClick 如下所示。

class Test {
    constructor(props) {
        super(props);
        this.state = {
            data: Data,
            modal: false
        };
        this.toggle = this.toggle.bind(this);
    }
    toggle(item) {
        this.setState({
        modal: !this.state.modal
        });
    }
    render() {
        const data=[{
                "Assignment": "52041",
                "Zone": "1"
            },
            {
                "Assignment": "52042",
                "Zone": "2"
            }];
        return (
            <div>
                <Button onClick={()=>this.toggle(data)} color="info" size="sm" block>Zone 1</Button>
                <Button onClick={()=>this.toggle(data)} color="info" size="sm" block>Zone 2</Button>
            </div>
        )
    }
}