以编程方式触发React-Bootstrap输入组件验证

我很新的反应，所以这可能是一件非常容易的事情。我目前正在使用Modal组件（来自ReactBootstrap），我正在使用Modal对话框组件内的react-bootstrap Input组件，并使用type=email。这在元素<form>中被提交并且表单被提交时将触发验证，并且如果验证失败，则会在输入组件顶部显示popoup类型的消息。但是，我没有在<form>元素中使用此组件，并且希望在单击按钮时触发此组件。这是代码工作的一块，我有一个表示该问题：以编程方式触发React-Bootstrap输入组件验证

/** @jsx React.DOM */ 

var Modal = ReactBootstrap.Modal; 
var ModalTrigger = ReactBootstrap.ModalTrigger; 
var Button = ReactBootstrap.Button; 
var Input = ReactBootstrap.Input; 

var TheModal = React.createClass({ 
    handleSubmit: function() { 
     // I want to trigger the email input validation here 
     // via this.refs.theInput 
    }, 
    render: function() { 
     return (
      <Modal {...this.props} title="Modal Title" animation={true} closeButton={false}> 
       <div className="modal-body"> 
        <Input ref="theInput" type="email" label="Email Address" defaultValue="Enter email" /> 
       </div> 

       <div className="modal-footer"> 
        <Button bsStyle="primary" onClick={this.handleSubmit}>Send</Button> 
        <Button bsStyle="danger" onClick={this.props.onRequestHide}>Close</Button> 

       </div> 
      </Modal> 
     ); 
    } 
}); 

var App = React.createClass({ 
    render: function() { 
     return (
      <div> 
       <ModalTrigger modal={<TheModal />}> 
        <Button bsStyle="primary" bsSize="large">Trigger Modal</Button> 
       </ModalTrigger> 
      </div> 
     ); 
    } 
}); 

React.render(<App />, 
    document.getElementById('content') 
);

来源

2014-12-03 Jonathan Nazario

你onClick事件是有线高达handleSubmit()，看起来OK。

通过this.refs.theInput.getDOMNode().value访问电子邮件值是否在handleSubmit()中不起作用？

如果是这样，我不知道ReactBootstrap的<Input>是否在其他元素包装本地DOM <input>;您可能需要导航DOM树才能获得实际的<input>以从中获取电子邮件的值。

来源

2014-12-04 02:27:22 Peter

像彼得所说的，我不得不遍历对象很远。

在我的组件的渲染功能;

render: function() { 
    return (
    <form onSubmit={this.handleSubmit}> 
     <Input ref='gameTitle' type='text' buttonAfter={<Button type="submit">Save</Button>} /> 
    </form> 
); 
}

在我的handleSubmit函数中;

handleSubmit: function() { 
    console.log(this.refs.gameTitle.refs.input.getDOMNode().value); 
}

来源

2015-03-13 01:26:40 igreulich

直接在输入上调用getValue()函数。

this.refs.theInput.getValue()应该返回您的theInput值。

如果您可能可以避免它，请勿使用getDOMNode()，因为它假设基础DOM实现在未来版本中不会更改。查看其他函数的react-bootstrap Input.jsx文件。

来源

2015-03-19 18:57:21

以编程方式触发React-Bootstrap输入组件验证

回答

相关问题