React-bootstrap Form getValue not a function

≯℡__Kan透↙ 提交于 2019-12-10 07:04:13

问题


Im using Meteor 1.2.3.4 with Mantra since i have changed to the latest React-Bootstrap version yesterday and replaced my <form> and <Input> to <Form>, <FormGroup> , <ControlLabel> and <FormControl> i get the following error:

login.jsx:70 Uncaught TypeError: user.getValue is not a function

import React from 'react';
import {Row, Col, Panel, Button, Glyphicon, Form, FormGroup, ControlLabel, FormControl } from 'react-bootstrap';

class login extends React.Component {

      render() {

            const {error} = this.props;

            return (
                  <Panel className="FormInput" >

                        <Row>
                              <Col lg={6} className="logon-right-col">
                                    <h3>Online Travel</h3>
                              </Col>
                              <Form>
                                    <Col lg={6}>
                                          <Row >
                                                <Col lg={4} xsOffset={8}>
                                                      <a href="/register"><Glyphicon glyph="plus"></Glyphicon> New User</a>
                                                </Col>
                                          </Row>

                                          <FormGroup controlId="user">
                                                <ControlLabel>User</ControlLabel>
                                                <FormControl ref="user" type="user" placeholder="User / Email" autofocus/>
                                          </FormGroup>
                                          <FormGroup controlId="password">
                                                <ControlLabel>Password</ControlLabel>
                                                <FormControl ref="password" type="password" placeholder="Password"/>
                                          </FormGroup>
                                          <Row>

                                                <Col lg={6}>
                                                      <FormGroup>
                                                            <Button onClick={this.login.bind(this)} bsStyle="primary" bsSize="small" type="submit">Login</Button>
                                                      </FormGroup>
                                                </Col>

                                                <Col lg={6} className="col-align-right">
                                                      <FormGroup>
                                                            <Button onClick={this.logout.bind(this)} bsStyle="primary" bsSize="small" type="submit">Logout</Button>
                                                      </FormGroup>
                                                </Col>

                                          </Row>
                                          <Row>
                                                <Col lg={6} className="col-align-right">
                                                      {error ? <p style = {{color: 'red'}}>{error}</p> :null}
                                                </Col>
                                          </Row>

                                    </Col>
                              </Form>
                        </Row>

                  </Panel>
            )
      }

      login(event) {
            event.preventDefault();
            const {loginUser}=this.props;
            const {user, password} = this.refs;
            loginUser(user.getValue(), password.getValue());
            //loginUser(user.getInputDOMNode().value, password.getInputDOMNode().value)
            user.getInputDOMNode().value = '';
            password.getInputDOMNode().value = '';
      }

      logout(event) {
            event.preventDefault();
            const{logoutUser}=this.props;
            logoutUser();
      }

};
export default login

The code did work before with the older react-bootstrap version. What am i doing wrong?

来源:https://stackoverflow.com/questions/36841297/react-bootstrap-form-getvalue-not-a-function

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!