Как закрыть все поповеры и инпуты?

Question

[mr_drinkens]

Всем привет.
В приложении есть несколько списков и различные поповеры (меню). Также, при выборе меню "редактирование" появляется input.
Например, мы нажимаем на меню - вылезает поповер.
Как сделать так, чтобы при клике "вне" этого списка (элемента) или при клике на меню следующего элемента, автоматом закрывались все поповеры? Завести в стейте переменную isShowing, и менять стейт каждый раз при клике через редьюсер?
спасибо

Answer 1

[KnightForce]

Можно.)
Тут по-любому store. Можно state у более высокого компонента и манипулировать потомками, но чтобы такое не городить - придумали Redux.)
Либо так:
В store определи isShowing и в state инпутов пробрость через контекст.

Comments

[mr_drinkens]

И еще такой вопрос (может, не по теме), какой вариант "подгрузки" данных будет предпочтительнее?
У меня 3 основных сущности: Project-List-Task.
Вариант1: Загрузить через АПИ все объекты для каждой сущности и сохранить в стор и манипулировать уже на клиенте с ним через filter в редюьсере?
Вариант2: Идти "последовательно": грузим сперва все Projects, сохраняем в стор, далее, при выборе определенного Project подгружаем Lists и Tasks?
спасибо

[KnightForce]

mr_drinkens:
Зависит от целей и объема данных и как часто будет загружаться project.
Если часто, то вариант 1.
Если пользователь выбирает 100% один и возможно откроет второй и т.д. То вариант 2.

И сколько весит Lists и Task. Если это ОЧЕНЬ большие штуки, то в любом случае вариант 2, иначе будет большой объем на клиенте.

[mr_drinkens]

KnightForce: Благодарю) А можешь примерчик набросать, с переменной isShowing для закрытия всех поповеров?

[KnightForce]

Тебе чистый React или React + Redux?

[mr_drinkens89]

KnightForce: react+redux) хотя б кратко, как это будет выглядеть)
спасибо.

[KnightForce]

store = {
    isShowing: true,
}

.........................
// Код где-то в другом месте

renderInputs() {
    // Можешь передать данные в аргумент и строить от них или все в render делать
    retrun [<input/>,<input/>,<input/>,<input/>,<input/>];
}

render() {
    <div className="input-block">
        {(isShowing) ? this.renderInputs() :  null}
    </div>
}

// Закрывай dispatch передавая false для  isShowing

isShowing - можешь передать через props или context.

[mr_drinkens]

KnightForce: Благодарю. Не совсем только понял логику)
Допустим (представим), что у нас 3 столбца и каждый столбец - это компонент реакт. В каждом столбце есть свой инпут и своя кнопка "меню", при нажататии на которую появляется поповер.
Мы нажимаем на меню в первом столбце - вылезает поповер. Далее, мы нажимаем на меню во втором столбце - первый поповер должен скрыться, а этот (при нажатии) - открыться). Так для всех поповеров)
На уровне компонента я делаю через setState. Да, это работает, но только в рамках этого компонента.

[KnightForce]

@mr_drinkens
Подробнее расписать?)

[mr_drinkens]

KnightForce: если не трудно)))

[KnightForce]

mr_drinkens:
Можешь хранить на контейнере (тот в котором столбцы) в state значение открыт ли 1 input.
В контейнере:

thsi.state = {
   visiblePopover: null,
}

handlerInput(number) {
    (e)=>{
        this.setState({visiblePopover: number});
    }
}

render() {
   data.map((item, i)=>{
        return(
            <div className="column">
                <Input key={i} onClick={this.handlerInput(key)/>
                {(thsi.state.visiblePopover===i) ? <Popover key={i} onClick={this.handlerInput(key)/> : null}
            </div>
    });//Можешь вместо null использовать style={{display: (thsi.state.visibleInput===i) ? "block" : "none"}}
}

Input:

function Input({onClick, ...props}) {

   /*
   Чтобы не писать лишних переменных, и не вешать лишних обработчиков, в любом случае нужна была бы еще одна переменная
   */

   if(onClick) {
      let handlerClick=onClick;
      onClick = (e)=>{
          handlerClick(e);
      }

   }
   
   return(
     <div className="inputConteiner">
          <input/>
          <button onClick={onClick}/>
     </div>
   )
}

На деле можешь все сделать по своему.)
Либо в store вынести.