Блог

В настоящее время я работаю над проектом, в котором пытаюсь создать несколько вкладок (представляющих разные комнаты), в которых есть перетаскиваемые объекты, которые мне нужно перетаскивать между комнатами. Все находится в dragdropcontext, и в каждой комнате есть куча областей, которые можно удалить.

Две проблемы возникают, когда я пытаюсь перетащить любой из перетаскиваемых предметов в другую комнату. У меня есть две проблемы, первая из которых самая большая, поэтому я сосредоточусь в основном на этом.

При перетаскивании перетаскиваемого объекта в другую комнату перетаскиваемый объект исчезает. Я получаю 3 предупреждения и 2 ошибки:

Предупреждение 1: https://i.stack.imgur.com/lbsp6.png

Предупреждение 2: https://i.stack.imgur.com/hnpdZ.png

Предупреждение 3: https://i.stack.imgur.com/OnWyU.png

2 ошибки: https://i.stack.imgur.com/06ta3.png

Я считаю, что проблемы возникают из-за того, что вкладка «Комната» получает «отображение: нет», когда она не выбрана, но я не совсем уверен и понятия не имею, как это исправить, потому что я очень новичок в реагировании.

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

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

Я не был уверен, какой код опубликовать, поэтому вот 3 наиболее релевантных фрагмента моего кода (предположим, что это дамп кода, но я не знаю, какие части важны)

Основной файл: https://pastebin.com/g6uBSyn1

 <Tabs className="Clinic-parent" selectedIndex={this.state.tabIndex} selectedTabClassName="Clinic-tab-button-selected" onSelect={index => this.setState({tabIndex: index})}>
          <TabList className="Clinic-tab-button-list">
            {this.state.history[this.state.stepNumber].workers.map((clinic, index) => (
              this.CreateClinics(index)
            ))}
          </TabList>
          {this.state.history[this.state.stepNumber].workers.map((clinic, index) => (
            this.CreateTabPanel(clinic, index)
          ))}
        </Tabs>
 

Вторичный файл: https://pastebin.com/UddZzxV7

Файл Css: https://pastebin.com/4y7XgYbQ