ReactJS onChange prevent user keep typing

Question

Is there a way where you can stop user typing when the words limits exceeds.

At the moment i have onChange in a textarea and e.preventDefault();. However it doesn't seems to stop users from typing. is there anyway can achieve this, i know you can addEventlister for keypress and prevent the default. but how does reactJS achieve the same functionality?

In jQuery: (how do i achieve the same in reactJS)?

  $(function(){
    $('textarea').keypress(function() {
      var l = $(this).val().split(' ');
      if(l.length > 50){
        return false;
      }
    })
  })

Answer 1

In react you can use onKeyPress event and use .preventDefault, .stopPropagation methods, like this

var Component = React.createClass({
    handleKeyPress: function(e) {
        var value = e.currentTarget.value.split(' ');

        if (value.length > 10) {
            e.preventDefault();
            e.stopPropagation();
        } else {
            console.log(value);
        }
    },
    render: function() {
        return <textarea onKeyPress={ this.handleKeyPress }></textarea>;
    }
});

Example

return false from within a jQuery event handler is effectively the same as calling both e.preventDefault and e.stopPropagation

Answer 2

What about <textarea maxLength={10}/> ?

http://www.w3schools.com/tags/att_input_maxlength.asp