Как я могу передать данные в модальном режиме responsestrap при нажатии определенного идентификатора кнопки?

Как я могу передать данные из моего модального окна, если щелкнул определенный идентификатор зоны кнопки? Например, у меня есть объект, указанный ниже, и у меня есть 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"
}]

reactjs reactstrap
person Jydon Mah    schedule 16.03.2018    source источник
comment
Вы можете использовать атрибуты данных   -  person Sagar Jajoriya    schedule 16.03.2018
comment
Является ли компонент Button вашей настраиваемой кнопкой и где именно вы пытаетесь использовать данные зоны   -  person Shubham Khatri    schedule 16.03.2018

Ответы (1)


arrow_upward
0
arrow_downward

Вы можете передавать данные 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>
        )
    }
}
person Dinesh Katwal    schedule 16.03.2018