在JavaScript中，即使元素位於DOM中，document.getElementById也不爲空

Question

在React中，我使用的組件是<input type="text" id="location" />。當DOM加載組件時，在組件的componentDidMount()中，我將嘗試搜索元素。

componentDidMount(){ 
    debugger; 
    let ele = document.getElementById('location'); 
    console.log('ele', ele) 
} 

當它打破在debugger，我看DOM（在Chrome元素標籤），上述輸入元素已經存在，但ele仍然在控制檯空。

爲什麼？該元素已經加載到DOM，但我仍然無法找到它？ 謝謝

Answer 1

你的代碼應該工作。但是，爲什麼你使用jQuery的方法？ ReactDom.findNode就是這個。您可以添加ref以訪問元素。

componentDidMount(){ 
    debugger; 
    var Value = React.findDOMNode(this.refs.location).value; 
    console.log('ele', ele) 
} 

<input type="text" ref="location" />