爲什麼jQuery不能找到這個react.js元素？

所以我正在做表單驗證，並且表單是使用React.js創建的。現在我正在尋找使用jQuery進行表單驗證，但是當我嘗試選擇react.js創建的元素，特別是具有默認值的輸入時，它表示該元素的值未定義。這意味着它沒有被發現。我已經在渲染後運行jQuery，所以我不知道是什麼阻止它找到id。爲什麼jQuery不能找到這個react.js元素？

的index.html

<section id="formDiv" class="sections"> 

</section> 
<script src="js/jquery.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
<!-- React.js --> 
<script src="https://fb.me/react-0.13.3.js"></script> 
<script src="https://fb.me/JSXTransformer-0.13.3.js"></script> 

<!-- Form jsx --> 
<script src="comp/Form.jsx" type="text/jsx"></script> 
<script src="comp/InputGroup.jsx" type="text/jsx"></script> 
<script src="comp/CheckboxGroup.jsx" type="text/jsx"></script> 
<script src="comp/RadioGroup.jsx" type="text/jsx"></script> 
<script type="text/jsx"> 

    React.render(<Form />, document.getElementById('formDiv')); 

</script> 
<script src="js/formverification.js" type="text/javascript"></script>

Form.jsx（是的，我知道的形式是一個可怕的名字）

var Form = React.createClass({ 

render: function() { 
    return(
     <div className="container form-border"> 
      <h2>Enter your info to subscribe.</h2> 
      <form> 
       <InputGroup className="has-success" for="nameInput" id="nameInput" type="text" placeholder="Name" glyph="glyphicon-ok">Name</InputGroup> 
       <InputGroup className="has-warning" for="emailInput" id="emailInput" type="email" placeholder="Enter email" glyph="glyphicon-warning-sign">Email</InputGroup> 
       <InputGroup className="has-error" for="passInput" id="passInput" type="password" placeholder="Password" glyph="glyphicon-remove">Password</InputGroup> 
       <div className="form-group"> 
        <label for="comments">Comments</label> 
        <textarea className="form-control" id="commentInput" rows="3" placeholder="Enter comments here"></textarea> 
       </div> 
      </form> 
     </div> 
    );   
    } 
});

formverification.js

console.log($('#nameInput').val());

爲什麼控制檯日誌未定義？

編輯：

對不起，忘了你可能需要這樣：

InputGroup.jsx

var InputGroup = React.createClass({ 
render: function() { 
    return(
     <div className={this.props.className + " form-group has-feedback"}> 
       <label className="control-label" for={this.props.for}>{this.props.children}</label> 
       <input type={this.props.type} value="Hello world" className="form-control" id={this.props.id} placeholder={this.props.placeholder} /> 
       <span className={"glyphicon " + this.props.glyph + " form-control-feedback"}></span> 
     </div> 
     ); 
    } 
});

來源

2015-05-26 Jaime Wissner

我沒有使用過反應，但如果它呈現異步，那麼你的console.log原本可以得到的InputGroup標籤運行（又名VAL（）是不確定的）。嘗試記錄選擇器而不是val（）以查看它是否選擇了您期望的內容 –

Object {context：HTMLDocument→index.html，selector：「#nameInput」} 這就是我得到的 –

我不知道是否這就是應該顯示或不，雖然 –