Question

我想在ReactJS中进行自动完成输入。在使用ReactJS之前，我通常使用jQuery进行自动完成。只是因为我一直在努力应对许多ReactJS的自动完成功能并在我的网站中出错，所以我决定返回jQuery的事情。

我通常像普通的jQuery一样编写代码，但是这次我遇到了异常错误：

cat

这是我编写的代码：

TypeError: Cannot read property 'version' of undefined at $.widget (home.js:5734)
    at CarouselPage._callee$ (home.js:49729)
    at tryCatch (home.js:46411)
    at Generator.invoke [as _invoke] (home.js:46637)
    at Generator.prototype.(/anonymous function) [as next] (http://localhost.mysite.com/js/home.js:46463:21)
    at asyncGeneratorStep (home.js:49673)
    at _next (home.js:49675)
    at home.js:49675
    at new Promise (<anonymous>)
    at CarouselPage.<anonymous> (home.js:49675)

在import React, {Component} from 'react'; import $ from 'jquery-ui'; /* ... some codes ... */ async componentWillMount() { $('#location').autocomplete({ source: '/thislocation/all/name' }); } /* ... more codes ... */ render() { let {state} = this; return ( <div className="carousel-home"> <input type="text" placeholder="Lokasi" name="location" id="location" autoComplete="off"/> </div> URI中，我通过/thislocation/all/name函数进入了我的控制器，我刚刚创建了一个硬编码数组来确保此代码有效：

getName()

我在这段代码中错过了什么？

Answer 1

您不能将React与JQuery混合使用。 React保留了它自己的DOM副本，并对其virtualDOM进行了所有更改，然后决定何时写入真实DOM。 JQuery直接对DOM使用命令性更改，因为React不会从DOM中读取内容，而只是对其进行写入，因此它不会知道jQuery所做的任何更改。它们是相反的对立面，您不应该混合使用它们。

Answer 2

您可以使用refs与jQuery进行集成！

我上周刚刚在工作中做到了这一点，需要将 jQuery 'hidden.bs.modal'事件监听器附加到在componentDidMount内定义的模式窗口中。

尝试一下：
（请参见componentWillMount和<input ref=...）

import React, {Component} from 'react';
import $ from 'jquery-ui';

  class ....
  /* ... some codes ... */

  async componentWillMount() {
    this.$el = $(this.el);
    this.$el.autocomplete({
      source: '/thislocation/all/name'
    });

    $('#location').autocomplete({
      source: '/thislocation/all/name'
    });
  }

  /* ... more codes ... */ 

  render() {
    let {state} = this;
    return (
      <div className="carousel-home">
        <input ref={el => this.el = el} type="text" placeholder="Lokasi" name="location" id="location"
            autoComplete="off"/>
      </div>
    )
  }```

TypeError：无法读取未定义的属性“版本”

2 个答案: