Question

所以我正在进行表单验证，表单是使用React.js创建的。现在我想用jQuery进行表单验证，但是当我尝试选择一个创建了react.js的元素时，特别是一个带有默认值的输入时，它表示该元素的值是未定义的。意思是它没有找到。我有jQuery在渲染之后运行，所以我不确定是什么阻止它找到id。

的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>
        );
    }
});

Answer 1

发现问题！ JSX Transformer的速度太慢，无法及时加载内容以便jQuery找到它。将jsx编译成js解决了问题，现在弹出正确的值。

Answer 2

你也可以使用React.findDOMNode，因为你可能想要获取虚拟dom上的元素，如果你遇到时间问题（等待加载反应）。

看看这个：working-with-the-browser

为什么jQuery不能找到这个react.js元素？

2 个答案: