Question

我正在尝试在挂载上使用getElementById()拉取“ activity_type”，但是它什么也不返回（这是默认状态值）。我正在componentDidMount()中进行此操作。

我尝试创建一个defaultValue，但这也没有解决。这是一个模式，如果我将其关闭然后再次打开，它将按预期工作。

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

的更多信息，请参见这些链接。

第一次安装时的getElementByID为空

1 个答案: