Javascript .与React一起使用时,键盘不是功能
我想使用jquery keyboard.js从文本区域获取用户输入 我正在使用的键盘: 这就是我得到的错误: 以下是我在文件中的导入:Javascript .与React一起使用时,键盘不是功能,javascript,jquery,reactjs,keyboard,Javascript,Jquery,Reactjs,Keyboard,我想使用jquery keyboard.js从文本区域获取用户输入 我正在使用的键盘: 这就是我得到的错误: 以下是我在文件中的导入: import React from "react"; import ReactDOM from 'react-dom'; import classnames from 'classnames'; import jQuery from 'jquery'; import keyboard from '../../../../node_modules/virtual
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);
这个键盘很好。已经调试过了。与此相同。道具。选项
这是我的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=验证(配置) 使用
ProvidePlugin
...
plugins: [ new webpack.ProvidePlugin({ jQuery: 'jquery', $: 'jquery' }) ]
...
然后在您的组件中,只需参考jQuery
,就好像它是窗口
对象上的一个全局变量一样。您可以对jqueryui执行同样的操作。不要导入它。jquery
已经在全局范围内,然后在模块中重新导入,并且在模块中的行为不正确,这似乎表明存在冲突
ProvidePlugin
将导致依赖于jQuery
的所有其他模块从jQuery
的单个全局实例扩展。这应该能解决你的问题。这应该可以解决jQueryUI问题以及您当前的问题。确保将其从html
模板中删除
请参阅以了解更多详细信息。因此,最后的问题是虚拟键盘的版本 我遵循以下步骤:
以匿名方式打开该项目,以确保没有缓存问题,并且成功了 您是否以
导入
以外的任何方式加载jQuery?如果不查看您的网页配置,将无法回答。您可能正在componentDidMount中引用不同的jQuery实例(window.jQuery),而不是本地(导入)范围的实例。尝试从“jQuery”导入jq,使用它,看看会发生什么。即使这样做有效,您也不应该在任何给定时间运行两个jQuery实例。您应该使用webpack.ProvidePlugin将其注入全局范围,就像这样。谢谢@natnai,我在html文件中加载了Jquery,但在删除它之后,Jquery UI开始给我带来问题。我尝试将jQuery更改为jq,但没有成功。您需要做的是使用ProvidePlugin
。感谢您的帮助,到目前为止,我已经尝试了您告诉我的所有内容,但都没有成功。不过我会继续努力的