Невозможно передать элемент панели «Реакция аккордеона» на призыв к действию

Как передать item._id из выбранного элемента в вызов действия getSubPanels? "subpanels" - раздел похож на "панели". Идея состоит в том, чтобы получить данные для субпанели, а затем открыть ее.

    getSub = (event) => {
    this.props.dispatch(getSubPanels(event.target.key));
}

render() {

const subpanels ...

    const panels =
        <Accordion.Accordion panels = {
            this.props.list.map((item) => {
                return {
                    key: item._id, title: item.name, content: { content: subpanels }
                }
            })
        } onTitleClick = {this.getSub}  />

    let rootpanel = this.props.rootlist.map((root) => {
        return {
            key: root._id, title: root.name, content: { content: panels }
        }
    })

    return (
        <div className = "ui one column stackable center aligned page grid">
            <div className = "column six wide">
                <Accordion panels = {rootpanel} defaultActiveIndex = {0} styled />
            </div>
        </div>
    )

Панель «Аккордеон» теперь открывается при установке activeIndex вручную, но как я могу установить ее динамически? При отладке кажется, что "this.index" имеет правильный индекс.

    getSub = id => event => {
    console.info(id);
    if (this.state.activeIndex > -1) {
        this.setState({ activeIndex: -1 });
    } else {
        this.props.dispatch(getSubPanels(id));
        // this.setState({activeIndex:this.index}); //Doesn't work
        this.setState({ activeIndex: 3 }); // Works
    }
}

Какой идентификатор? у вас есть массив, содержащий идентификаторы и одну заданную функцию

— 18.12.2018 22:47

reactjs semantic-ui

18.12.2018 22:39

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

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

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

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

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

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

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

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

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

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

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

490

Ответы 2

Вы можете обернуть свою функцию в карту, а затем предварительно настроить ее с помощью идентификатора:

getSub = id => event => {
    console.info(id)
    this.props.dispatch(getSubPanels(event.target.key));
}

render() {
    const panels =
        <Accordion.Accordion panels = {
            this.props.list.map((item) => {
                return {
                    key: item._id,
                    title: item.name,
                    content: { content: subpanels },
                    onTitleClick: this.getSub(item._id)
                }
            })
        } />

Да, теперь getSubPanel работает, но панель остается закрытой. Как получить еще и "нормальный" onTitleClick для открытия панели?

— 19.12.2018 09:32

Предоставленного вами кода недостаточно для понимания вашей проблемы.

— 19.12.2018 09:44

Отредактировал исходный фрагмент кода. Надеюсь, это проясняет.

— 19.12.2018 21:25

Как я могу установить значение индекса в состояние (activeIndex)?

— 21.12.2018 08:23

18.12.2018 22:49

Таким образом, я мог получить вызов элемента панели аккордеона onclick и обработать панели.

Функция:

getSub = panelProps => event => {
console.info(panelProps.panelActiveId);
var old_activeIndex = this.state.panelActiveIndex;
var active = -1;
var i = -1;
if (this.state.panelActiveIndex > -1) {
  this.setState({ panelActiveIndex: -1 });
}
this.getSubList(panelProps.panelActiveId);
for (i = 0; i < panelProps.idList.length; i++) {
  if (panelProps.panelActiveId === panelProps.idList[i]._id) {
    active = i;
  }
}
if (old_activeIndex !== active) {
  this.setState({ subPanelActiveIndex: -1 });
  this.setState({ panelActiveIndex: active });
}

};

Аккордеонная панель:

  let panel1 = (
  <Accordion.Accordion
    panels = {this.list.map(item => {
      listIdx = listIdx + 1;
      idList.push({ listIdx: listIdx, _id: item._id });
      return {
        key: item._id,
        title: item.name,
        content: { content: subPanels },
        onTitleClick: this.getSub({
          panelActiveId: item._id,
          idList: idList
        })
      };
    })}
    activeIndex = {this.state.panelActiveIndex}
  />
);

Полный пример здесь: https://codesandbox.io/s/l4m61qmr3q

28.12.2018 14:35