@lenox94

Как открыть всего одно модальное окно?

При нажатии на один тригер-card открывается столько модальных окон, сколько тригеров-card есть в маcсиве, а хотелось бы одно открыть, как это сделать?

var arr = [{src: check, text: "#1111111" },{src: check, text: "#222222"},{src: check, text: "#33333"}]
export default class Menu extends Component {

    state = {
        modalOpen: false
    }

handleOpen = () => this.setState({ modalOpen: true })

handleClose = () => this.setState({ modalOpen: false })

renderCards = () => {
        return arr.map((item, i) => {
            return(
                <Modal open={this.state.modalOpen}
                             dimmer="inverted"
                             onClose={this.handleClose}
                             key={i}
                             trigger={
                                 <Card onClick={this.handleOpen}>
                                      <Image src={item.src} />
                                    <Text grey medium fontSize="12px">{item.text}</Text>
                                </Card>}>
                                    <ModalContent data={item.text}  onClose={this.handleClose.bind(this)}/>
                </Modal>
            )
        })
    }

 render(){
        return( <Fragment>
 {this.renderCards()}
 </Fragment> )
    }
}
  • Вопрос задан
  • 65 просмотров
Решения вопроса 1
0xD34F
@0xD34F
Пусть modalOpen будет не boolean, а число - индекс открытого окна.

Или, вместо состояния открытости окон храните данные для них - а окно будет одно. Данные есть - окно показывается.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы