javascript - 第一次挂载时的 getElementByID 为空

Question

我试图在装载时使用 getElementById() 拉取“activity_type”，但它没有返回任何内容(这是默认状态值)。我正在我的 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>
)}

Answer 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>)}

有关 concept of refs 的更多信息，请参阅这些链接，更具体地说 call back refs