Question

我正在进行自动完成，现在我在纯JS中使用它

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

}

控制台出错：

未捕获的TypeError：无法读取未定义的属性“split”

我错过了什么？

Answer 1

在第一次渲染时，input没有值，因此它将是未定义的。要解决此问题，您应该在getInitialState {value : ''}和input标记中创建一个状态，将状态指定给值属性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事件中跟踪值更改，那会更好。

自动完成：从纯JS到ReactJS

1 个答案: