Question

尝试使用一些Refs来实现相对简单的输入形式。不幸的是，我总是得到一个＆＃34;模块构建失败：SyntaxError：意外的令牌＆＃34;错误。

尝试使用React.createRef()以及使用ref={(input) => this.title = input}内联输入的旧方式来推荐React 16.3+中的建议方式。

以下是选项1的组件：

import React from 'react';

class AddTextForm extends React.Component {

submit = () => {
  console.log(this.title.value)
  }

  render () {
    return (
      <div>
        <form>

          <input name="title" ref={(input) => this.title = input} type="text" placeholder="Add title" />   
          <button type="submit" onClick={this.submit} className="detailsctabutton w-button">Add Text</button>
        </form>
      </div>
    );
  }
}
export default AddTextForm;

这就是错误：

/src/components/AddTextForm.js
Module build failed: SyntaxError: Unexpected token (5:7)

  3 | class AddTextForm extends React.Component {
  4 | 
> 5 | submit = () => {
    |        ^
  6 |   console.log(this.title.value)
  7 |   }
  8 |

以下是组件选项2：

import React from 'react';

class AddTextForm extends React.Component {

  titleRef = React.createRef();

  createText (event) {
    event.preventDefault();
    const text = {
      title: this.titleRef.value.value
    };
    console.log(text);
  };

  render () {
    return (
      <div>
        <form onSubmit={this.createText}>

          <input name="title" ref={this.titleRef} type="text" placeholder="Add title" />

          <button type="submit" className="detailsctabutton w-button">Add Text</button>
        </form>
      </div>
    );
  }
}
export default AddTextForm;

这是选项2的错误：

./src/components/AddTextForm.js
Module build failed: SyntaxError: Unexpected token (5:11)

  3 | class AddTextForm extends React.Component {
  4 | 
> 5 |   titleRef = React.createRef();
    |            ^
  6 | 
  7 |   createText (event) {
  8 |     event.preventDefault();

我尝试实现的代码也是教程的一部分，所以显然应该可行，但我不知道为什么不在这种情况下。

这是我的设置问题吗？的WebPack？（对不起，Webpack的新手）

这是webpack.config.js

const path = require('path');
const webpack = require('webpack');

// copy manifest.json to the path: 'public/build'
// this will allow for the authRequest to see the file at www.example.com/manifest.json
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ManifestAssetPlugin = new CopyWebpackPlugin([ { from: 'src/assets/manifest.json', to: 'manifest.json' } ]);
const IconAssetPlugin = new CopyWebpackPlugin([ { from: 'src/images/icon-192x192.png', to: 'icon-192x192.png' } ]);
const UglifyEsPlugin = require('uglify-es-webpack-plugin');
const UglifyEsPluginConfig = new UglifyEsPlugin({
    mangle: {
        reserved: [
                    'Buffer',
                        'BigInteger',
                        'Point',
                        'ECPubKey',
                        'ECKey',
                        'sha512_asm',
                        'asm',
                        'ECPair',
                        'HDNode'
                ]
        }
})


const HtmlWebpackPlugin = require('html-webpack-plugin');
const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: './src/index.js',
  target: 'web',
  output: {
    path: path.resolve('public/build'),
    filename: 'index_bundle.js',
  },
  devServer: {
    historyApiFallback: {
      disableDotRule: true
    },
    watchOptions: { aggregateTimeout: 300, poll: 1000 },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization",
    },
  },
  module: {
    rules: [
      { test: /\.json$/, use: 'json-loader' },
      { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ },
      { test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/ },
      {
        test: /\.(eot|woff|woff2|ttf|svg|png|jpe?g|gif)(\?\S*)?$/,
        loader: 'file-loader!url-loader',
      },
      { test: /\.css$/, loader: 'style-loader!css-loader' }
    ]
  },
  plugins: [
    HtmlWebpackPluginConfig, 
    ManifestAssetPlugin, 
    IconAssetPlugin,
    UglifyEsPluginConfig
 ]
}

以下是依赖项：

"devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^6.4.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "file-loader": "^0.11.1",
    "html-webpack-plugin": "^2.28.0",
    "json-loader": "^0.5.4",
    "path": "^0.12.7",
    "style-loader": "^0.16.1",
    "uglify-es-webpack-plugin": "^0.10.0",
    "url-loader": "^0.5.8",
    "webpack": "^2.3.3",
    "webpack-dev-server": "^2.4.2"
  },
  "dependencies": {
    "bootstrap": "^3.3.7",
    "react": "^16.4.0",
    "react-dom": "^16.4.0",
    "react-router-dom": "^4.2.2"
  }
}

感谢您的帮助！让我疯狂了两天。

refact in React - React.createRef（） - 模块构建失败：SyntaxError：意外的令牌

0 个答案: