Как я могу передать данные в модальном режиме 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"
}]

Вы можете использовать атрибуты данных

— 16.03.2018 06:09

Является ли компонент Button вашей настраиваемой кнопкой и где именно вы пытаетесь использовать данные зоны

— 16.03.2018 06:11

reactjs reactstrap

16.03.2018 06:05

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 326

Ответы 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>
        )
    }
}

16.03.2018 06:42

Другие вопросы по теме

Использование помощника .map () с макетом bootstrap <Col sm = "4" /> в React

ReactsTrap не отображает мой модальный

Как не отображать всплывающую подсказку при нажатии кнопки сразу?

Как я могу использовать responsestrap, когда модуль CSS включен?

Как изменить ширину модального диалога на 100%

Установить цвет на Reactsrap Navlink

Как сделать так, чтобы список выбора отображался поверх другого элемента?

Невозможно принять значение из Input Type = "select"

Реакция: как справиться с большим элементом ввода td в таблице, который перерисовывается каждый раз, когда происходит изменение состояния?

Модальное управление от родителя - React hooks | Реактстрап

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

Ответы 1

Другие вопросы по теме

Похожие вопросы