自动完成：从纯 JS 到 ReactJS

Question

我正在研究自动完成，现在我在纯 JS 中拥有它

这里我在 JSFiddle 中有这个例子

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

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

js部分

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;
}

但我需要将它翻译成 ReactJS，而且我没有得到好的结果

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;
  }  

}

控制台中的错误：

未捕获的类型错误：无法读取未定义的属性“拆分”

我错过了什么？

Answer 1

在第一次渲染时， input没有值，因此它将是未定义的。 要解决此问题，您应该在 getInitialState {value : ''}创建一个状态，并在input标签中将该状态分配给 value 属性value={this.state.value} 。 以下是如何适应您的代码：

class Login extends Component {

  constructor() {
    super(props);
     this.state = {value : '', result : ''};

  }     

  render () {
    return (
      <Grid>
          <input type="text" onChange={this._onChange.bind(this)} onKeyUp={this._changeInput.bind(this)} value={this.state.value} />
          <div id="result">{this.state.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() {
    var autoCompleteResult = this._matchPeople(this.state.value);
    this.setState({result : autoCompleteResult})
  }  

  _onChange = (event) => {
      this.setState({value: event.target.value})
   }

}

如果您也跟踪输入的onChange事件中的值变化会更好。