.keyboard 与 React 一起使用时不是函数答案

【问题标题】：.keyboard is not a function when used with React.keyboard 与 React 一起使用时不是函数
【发布时间】：2017-07-20 23:06:15
【问题描述】：

我想使用 jquery keyboard.js 从文本区域获取用户输入。

我正在使用的键盘：https://github.com/Mottie/Keyboard

这是我得到的错误：

这些是我文件中的导入：

import React from "react";
import ReactDOM from 'react-dom';
import classnames from 'classnames';
import jQuery from 'jquery';
import keyboard from '../../../../node_modules/virtual-keyboard/dist/js/jquery.keyboard.js';

这是我的代码：

export default class KEyboard extends React.Component {
    ...
    componentDidMount() {
         ...
         jQuery(ReactDOM.findDOMNode(this.refs.keyboard)).keyboard(this.props.options);

this.refs.keyboard 很好。已经调试过了。同 this.props.options

这是我的 webpack.config.js

var path = require('path');
const validate = require('webpack-validator');


var config = {
  entry: './src/index.js',
  output: {
  path: __dirname,
  filename: 'bundle.js'
},
devtool: 'source-map',
eslint: {
  configFile: './.eslintrc'
},
module: {
  preLoaders: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'eslint-loader'
    },
  ],
  loaders: [
    {
      test: /\.(js|jsx)$/,
      loader: 'babel-loader',
      include: path.join(__dirname, 'src'),
      exclude: /node_modules/,
      query: {
        presets: ['es2015', 'react']
      }
    },
    {
      test: /\.css$/,
      loader: 'style-loader'
    },
    {
      test: /\.css$/,
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    /*
    {
      test: /\.scss$/,
      loaders: ['style', 'css', 'sass']
    },
   */
    {
      test: /\.scss$/,
      loader: 'style-loader'
    },
    {
      test: /\.scss$/,
      loader: 'css-loader',
      query: {
        modules: true,
        localIdentName: '[name]__[local]___[hash:base64:5]'
      }
    },
    {
      test: /\.scss$/,
      loader: 'sass-loader'
    },
    /*
    {
      test: /\.js$/,
      exclude: /node_modules/,
      loaders: ['babel-loader', 'eslint-loader']
    }
    */
    {
      test: /\.(jpg|png)$/,
      loader: 'file-loader?name=[path][name].[hash].[ext]'
    },
  ]
},
};

module.exports = validate(config);

【问题讨论】：

您是否以除import之外的任何其他方式加载jQuery？
不看你的 webpack 配置就无法回答。您可能在 componentDidMount 中引用了不同的 jQuery (window.jQuery) 实例，而不是本地（导入）范围内的实例。尝试 import jq from 'jQuery'，使用它，看看会发生什么。即使这确实有效，您也不应该在任何给定时间运行两个 jQuery 实例。您应该使用 webpack.ProvidePlugin 将其注入全局范围，就像这样。
谢谢@natnai，我在我的 html 文件中加载了 Jquery，但是在我删除它之后，jquery UI 开始给我带来问题。我尝试将 jQuery 更改为 jq，但它也不起作用
那么你需要做的就是使用ProvidePlugin。

标签： javascript jquery reactjs keyboard

【解决方案1】：

使用ProvidePlugin。

...

plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ]

...

然后在您的组件中，只需引用jQuery，就好像它是window 对象上的全局变量一样。您可以对 jquery-ui 执行相同的操作。不要import它。 jquery 已经在全局范围内，然后在模块中重新导入，并且在模块中的行为不正确，这一事实似乎表明存在冲突。

ProvidePlugin 将导致所有其他依赖于jQuery 的模块从jQuery 的单个全局实例扩展。这应该可以解决您的问题。那应该可以解决 jquery-ui 问题以及您当前的问题。确保将其从您的 html 模板中删除。

更多详情请见webpack documentation。

【讨论】：

感谢您的帮助，到目前为止，我已经尝试了您告诉我的所有方法，但它不起作用。不过我会继续努力的

【解决方案2】：

所以，最终问题出在虚拟键盘的版本上。

我按照以下步骤操作：

npm install --save virtual-keyboard@1.26.13
npm 安装
npm 运行构建
npm 运行观察

以隐身模式打开项目以确保没有缓存问题，并且成功了！

【讨论】：