1

iam using the latest version of meteor & react. Yesterday I switched to the newest version of bootstrap. Before that everything worked just fine now I can´t fix my (really noobish) problem.

import React, {Component} from 'react';
import { FormControl, , etc. } from 'react-bootstrap';
export default class Login extends Component {

login(event) {
    event.preventDefault();

    var username = this.refs.inputName.refs.input.value.trim();
    var password = this.refs.inputPw.refs.input.value.trim();

    Meteor.loginWithPassword(username, password, function (error) {
        if (error) {
         ...
        }
        else {
            FlowRouter.go('/c/' + Meteor.user().username);
        }
    });
    this.refs.password.refs.input.value = ""; 
}

   render() {
    return (
        <Row>
            <Col xs={3} xsOffset={4}>
                <form onSubmit={this.login.bind(this)}>
                    <FormGroup>
                        <ControlLabel>Willkommen</ControlLabel>
                        <FormControl
                            type="text"
                            placeholder="Benutzername"
                            ref="inputName"
                            name="username"/>
                    </FormGroup>
                    <FormGroup>
                        <FormControl
                            placeholder="Password"
                            ref="inputPw"
                            name="password"
                            type="password"/>
                    </FormGroup>

                    <FormGroup>
                        <Col smOffset={2} sm={10}>
                            <Button bsStyle="primary" label="Login" id="loginButton" type="submit" active>Login</Button>
                        </Col>
                    </FormGroup>


                </form>
            </Col>
        </Row>
    );
}

In my previous solution I used a simple input form. Due to deprecation I switched to this formControl stuff. Now it seems that

  <form onSubmit={this.login.bind(this)}>

login never gets called. Console.log(username) returns undefined. Thanks in advance and many greetings.

//edit 1: It seems like Iam not the only one with this problem. React-bootstrap Form getValue not a function This helped me a lot to find my solution:

import ReactDom from 'react-dom';
        var username = ReactDom.findDOMNode(this.refs.inputName).value;
        var password = ReactDom.findDOMNode(this.refs.inputPw).value;
Community
  • 1
  • 1
macnair
  • 13
  • 5
  • Do you want to post your solution as an answer to your own question? This will help others who run into the same issue. – Michel Floyd Apr 30 '16 at 20:57

0 Answers0