Support for ref's on Input component

[mwq27]

I'm not able to set a ref attribute on the Input component.

[hai-cea]

Hi @mwq27 - I'm not able to reproduce the issue you're referring to.

I was able to do that following:

/**
 * @jsx React.DOM
 */

var React = require('react'),
  mui = require('material-ui');

var myComponent = React.createClass({

  componentDidMount: function() {
    console.log(this.refs.firstname.getDOMNode());
  },

  render: function() {
    return (
        <mui.Input ref="firstname" type="text" name="firstname" placeholder="First Name" description="Your first name as it appears on your credit card." />
    );
  }

});

module.exports = MyComponent;

[mwq27]

So I have

console.log(this.refs.firstname.getDOMNode().value) 

that is returning undefined, even after I add text to the input. this.refs.firstname.getDOMNode() by itself is the div that gets created in Input.jsx, so I guess it wouldn't have a .value property.

[hai-cea]

Ahh yes. You're right. I've updated the input component to handle this.

Now you can do:

render: function() {
    return (
        <mui.Input ref="firstname" defaultValue="Test" onChange={this._onChange} />
    );
},

//onChange now passes back the new value as a second parameter
_onChange: function(e, value) {
  console.log(value);

  //Or you can do this elsewhere in your component
  console.log(this.refs.firstname.getValue());
}

[mwq27]

ok great, thank you :)