4

我将 Meteor 1.2.3.4 与 Mantra 一起使用，因为我昨天已更改为最新的 React-Bootstrap 版本并替换了我的<form>and <Input>to<Form>, <FormGroup> , <ControlLabel>并且<FormControl>我收到以下错误：

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

该代码之前确实可以使用较旧的 react-bootstrap 版本。我究竟做错了什么？

4

0 回答 0