GetElementByID при первом монтировании пуст
Я пытаюсь вытащить "activity_type" с getElementById() при монтировании, но он ничего не возвращает (что является значением состояния по умолчанию). Я делаю это в своем componentDidMount().
Я попытался создать значение по умолчанию, но это тоже не помогло. Это модальный режим, и если я закрою его и открою снова, он будет работать должным образом.
componentDidMount () {
const {handleModalMount}= this.props
handleModalMount(document.getElementById("activity"))
}
render(){
....
return(
...
<select style = {{fontWeight:'900', fontSize:'12px'}} className = "no-radius" id = "activity" name = "selectedActivity" onChange = {(e)=> handleClick(e)}>
{(activity_options.filter(option => selectedType === option.activityRefName)).map((activity, i) =>
{return (
<option key = {i} value = {activity.activityTypeName}>{activity.activityTypeName}</option>
)
})}
</select>
)}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Более надежный способ получить элемент DOM в вашем компоненте - использовать ref. Этого можно добиться несколькими способами - один из них - через обратный вызов элемента <select/>, например:
ref = { element => this.handleModalMount(element) }
Вы должны обнаружить, что следующая настройка метода render() вашего компонента (и метода componentDidMount()) позволит достичь того, что вам нужно:
componentDidMount () {
// No need for this
// const {handleModalMount}= this.props
// handleModalMount(document.getElementById("activity"))
}
render(){
....
return(
...
<select ref = { element => this.handleModalMount(element) }
style = {{fontWeight:'900', fontSize:'12px'}}
className = "no-radius" id = "activity"
name = "selectedActivity"
onChange = {(e)=> handleClick(e)}>
{(activity_options
.filter(option => selectedType === option.activityRefName))
.map((activity, i) => { return (
<option key = {i}
value = {activity.activityTypeName}>
{activity.activityTypeName}
</option>)})}
</select>)}
См. Эти ссылки для получения дополнительной информации о концепция реф., а точнее перезвонить реф.
Когда я нажимаю на свой handleModalMount, он показывает ожидаемую ссылку, но каким-то образом null передается как элемент. Спасибо и за объяснение в ответе и за форматирование кода
nvm, handleModalMount был передан как опора, я перенес его в дочерний компонент (код, который я опубликовал), и это исправлено.
привет @ user10204157, рад, что смог помочь - всего наилучшего в вашем проекте :)
рассмотрите возможность использования для этого
ref, а неgetElementById()