Я новичок, чтобы реагировать, и в настоящее время я делаю комбо-компонент. Что я делаю, так это выбираю период времени по выбору пользователя, например, 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, как я могу это сделать?
Спасибо.