当单击特定按钮ID时,如何在reactstrap模式中传递数据?

时间:2018-03-16 05:05:24

标签: reactjs reactstrap

如果点击特定按钮区域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"
}]

1 个答案:

答案 0 :(得分:0)

您可以传递数据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>
        )
    }
}