Создание комбо-бокса в реакции с использованием начальной загрузки 4 - PullRequest
0 голосов
/ 02 мая 2019

Я новичок, чтобы реагировать, и в настоящее время я делаю комбо-компонент. Что я делаю, так это выбираю период времени по выбору пользователя, например, 4 часа, 5 часов и т. Д.

Эти элементы находятся в списке, и компонент работает просто отлично. Моя проблема в том, что я могу получить доступ к выбранному элементу в классе, где я вызываю mt combobox. Вот что у меня есть:

import React, { Component } from 'react'
import FontAwesome from 'react-fontawesome'

class ComboBox extends Component {
constructor(props) {
    super(props)
    this.state = {
        listOpen: false,
        headerTitle: this.props.title
    }
    this.close = this.close.bind(this)
}

componentDidUpdate() {
    const { listOpen } = this.state
    setTimeout(() => {
        if (listOpen) {
            window.addEventListener('click', this.close)
        }
        else {
            window.removeEventListener('click', this.close)
        }
    }, 0)
}

componentWillUnmount() {
    window.removeEventListener('click', this.close)
}

close(timeOut) {
    this.setState({
        listOpen: false
    })
}

selectItem(title, id, stateKey) {
    this.setState({
        headerTitle: title,
        listOpen: false
    }, this.props.resetThenSet(id, stateKey))
}

toggleList() {
    this.setState(prevState => ({
        listOpen: !prevState.listOpen
    }))
}

render() {
    const list = this.props.list
    const { listOpen, headerTitle } = this.state

    return (
        <div className="dd-wrapper">
            <div className="dd-header" onClick={() => this.toggleList()}>
                <div className="dd-header-title">{headerTitle}</div>
                {listOpen}
            </div>
            {listOpen && <ul className="dd-list" onClick={e => e.stopPropagation()}>
                {list.map((item) => (

                    <a className="dropdown-item" key={item.id} onClick={() => this.selectItem(item.title, item.id, item.key)}>{item.title} {item.selected}</a>
                ))}
            </ul>}
        </div>
    )
}

}

экспорт по умолчанию ComboBox

И я называю этот компонент следующим образом:

<ComboBox
                                title="Select one.."
                                list={this.state.hour}
                                resetThenSet={this.resetThenSet}
                            />

Моя проблема в том, что я не могу получить доступ к названию моего комбинированного списка здесь, в моем компоненте класса, где я вызываю comboBox, как я могу это сделать? Спасибо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...