Accessing input value from an element using ReactJs

Question

How can I check wether an input field contains any value or not from another element. My attempt,

<div className='input-item'>
      <input ref="accessKey" name="username" className="lci-text" type="text"/>

      <label className={"helpers" + ((this.ref.accessKey.value.length > 0) ? 'toggled' : '')}>Access Key</label>
</div>

I'm trying to add a class '.toggled' to the label when the input has any values but getting the following error in console.

Uncaught TypeError: Cannot read property 'accessKey' of undefined

Update

I've also tried this.refs.accessKey.value.length this time getting the following error

Uncaught TypeError: Cannot read property 'value' of undefined

Please help me sort this.

Pierre · Accepted Answer · 2016-02-29 22:03:30Z

2

It's not recommended to access a ref directly to make changes in the same component. Additionally, since you are using react, you need make use of this.state.

As a side note, you should make use of the npm package classNames

Below is your updated code, using React State.

HTML

<div id="container"></div>

CSS

.helpers{ color: red }
.helpers.toggled{ color: green }

Javascript

var Hello = React.createClass({

  getInitialState: function() {
    return {value: ''};
  },

  handleChange: function(event) {
    this.setState({value: event.target.value});
  },

  render: function() {
    var toggled = this.state.value.length ? ' toggled' : '';

    return (
      <div>
        <input type='text'
          value={ this.state.value }
          onChange={ this.handleChange }
        />
        <label className={ 'helpers' + toggled }>Access Key</label>
      </div>
    );
  }

});

ReactDOM.render(
  <Hello />,
  document.getElementById('container')
);

Fiddle

https://jsfiddle.net/qejxjo1x/2/

Official Notes and References:

Never access refs inside of any component's render method – or while any component's render method is even running anywhere in the call stack.

If you want to preserve Google Closure Compiler advanced-mode crushing resilience, make sure to never access as a property what was specified as a string. This means you must access using this.refs['myRefString'] if your ref was defined as ref="myRefString".

If you have not programmed several apps with React, your first inclination is usually going to be to try to use refs to "make things happen" in your app. If this is the case, take a moment and think more critically about where state should be owned in the component hierarchy. Often, it becomes clear that the proper place to "own" that state is at a higher level in the hierarchy. Placing the state there often eliminates any desire to use refs to "make things happen" – instead, the data flow will usually accomplish your goal.

edited Feb 29, 2016 at 22:03

answered Feb 23, 2016 at 12:48

Pierre

19.1k5 gold badges44 silver badges63 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Body Over a year ago

Thank you for your answer. No luck with 'refs' as well. Please check my update above.

WitVault Over a year ago

@Body but you are advised not to use refs !

shivam · Accepted Answer · 2016-02-23 12:48:18Z

0

use refs instead of ref:

this.refs.accessKey.value.length

answered Feb 23, 2016 at 12:48

shivam

16.6k3 gold badges61 silver badges72 bronze badges

1 Comment

Body Over a year ago

Thank you for your answer. No luck with 'refs' as well. Please check my update above.

Collectives™ on Stack Overflow

Accessing input value from an element using ReactJs

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related