lundi 31 août 2015

Autocomplete: from pure JS to ReactJS

I am working on an auto-complete, right now I have it in pure JS

here I have this example in JSFiddle

<input type="text" onkeyup="changeInput(this.value)">

<div id="result"></div>

the js part

var people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

function matchPeople(input) {
  var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
  return people.filter(function(person) {
    if (person.match(reg)) {
      return person;
    }
  });
}

function changeInput(val) {
  var autoCompleteResult = matchPeople(val);
  document.getElementById("result").innerHTML = autoCompleteResult;
}

but I need to translate it to ReactJS, and I am not getting good results

let people = ['Steven', 'Sean', 'Stefan', 'Sam', 'Nathan'];

class Login extends Component {

  render () {
    return (
      <Grid>
          <input type="text" onkeyup={this._changeInput(this.value)} />
          <div id="result"></div>
      </Grid>
    );
  }

  _matchPeople = (input) => {
    var reg = new RegExp(input.split('').join('\\w*').replace(/\W/, ""), 'i');
    return people.filter(function(person) {
      if (person.match(reg)) {
        return person;
      }
    });
  }

  _changeInput = (val) => {
    var autoCompleteResult = this._matchPeople(val);
    document.getElementById("result").innerHTML = autoCompleteResult;
  }  

}

Error in the console:

Uncaught TypeError: Cannot read property 'split' of undefined

what am I missing ?



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire