小编T. *_*ans的帖子

在Webpack中使用样式加载器时出现“未定义窗口”错误

构建服务器端react应用程序,并且在使用Webpack时,Style-Loader出现问题。

我正在使用版本“ ^ 0.23.1”,并且在运行脚本进行捆绑和构建时,Style-Loader出现了问题。

问题是 window is not defined

webpack:///./node_modules/style-loader/lib/addStyles.js?:23
    return window && document && document.all && !window.atob;
Run Code Online (Sandbox Code Playgroud)

有没有人遇到这个问题?在查看了有关样式加载程序的Stack和Github问题之后,我没有找到任何解决方案。

这是我的webpack文件:

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

module.exports = {
  // webpack to use node
  target: 'node',
  entry: './src/index.js',
  output: {
    filename: 'client-build.js',
    path: path.resolve(__dirname, 'build/public'),
    publicPath: '/build/public'
  },
  module: {
    rules: [
      {
        test: /\.js$|\.jsx$/,
        loader: 'babel-loader',
        exclude: '/node_modules/',
        options: {
          presets: [
            '@babel/preset-react'
          ]
        }
      },
      {
        test: /\.(s*)css$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      },
      {
        test: /\.jpeg$|\.gif$|\.png$|\.svg$|\.woff$|\.ttf$|\.wav$|\.mp3$|\.jpg$|\.pdf$/, …
Run Code Online (Sandbox Code Playgroud)

reactjs webpack webpack-style-loader

10
推荐指数
2
解决办法
3102
查看次数

在FlatList上使用React Native搜索过滤器

我正在尝试根据搜索栏文本搜索平面列表.我遇到的问题是,当用户输入错误时...说他们想输入"汉堡"但是错误地键入"burget"然后它不会返回任何内容.当用户删除"t"时,它应该再次重新呈现平面列表,最后一个文本与"burge"部分匹配.

注意:使用react-native-elements搜索栏,它允许我用e或event调用文本.

到目前为止我在Main.js文件中有什么:

searchText = (e) => {
    let text = e.toLowerCase();
    let trucks = this.state.data;

    // search by food truck name
    let filteredName = trucks.filter((truck) => {
      return truck.name.toLowerCase().match(text); 
    });

    // if no match and text is empty
    if(!text || text === '') {
      console.log('change state');
        this.setState({
          data: initial
        });
      }
    // if no name matches to text output
    else if(!Array.isArray(filteredName) && !filteredName.length) {
      console.log("not name");
      this.setState({
        data: [],
      });
    }
    // if name matches then display
    else if(Array.isArray(filteredName)) …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-native

9
推荐指数
5
解决办法
2万
查看次数

React 中的 autocomplete="current-password" 不显示填写表单

我在使用表单时遇到问题,autocomplete="current-password"其中表单未显示当前密码。密码保存在 Chrome 中。被input包裹在一个form. autocomplete="current-password"有人因不为他们工作而遇到问题吗?

这是我对 React 的输入:

<input
  type={this.state.visible ? `text` : `password`}
  onChange={(e) => this.props.onChange('password', e.target.value)}
  autoComplete="current-password"
  placeholder="password"
 />
Run Code Online (Sandbox Code Playgroud)

我没有看到任何提及此不起作用的内容或任何人提到此不起作用。

注意:autoComplete在 React 中必须这样拼写,​​因为 React 无法识别属性 as但会在asautocomplete上渲染DOMautocomplete

以下是元素在 上的渲染方式DOM

<form class="sign-in">
  <div class="input-group">
    <label>Email</label>
    <input type="email" placeholder="achroma@gmail.com" autocomplete="username" name="email" value="">
  </div>
  <div class="input-group">
    <div class="password-top">
      <label>Password</label>
      <span class="password-toggle">show password</span>
    </div>
  <input type="password" autocomplete="current-password" placeholder="password">
  <span class="forgot-password">Forgot Password?</span>
  </div>
</form>
Run Code Online (Sandbox Code Playgroud)

html autocomplete reactjs

7
推荐指数
1
解决办法
1万
查看次数

使用React Native和iOS模拟器进行错误的地理定位

我正在使用react-native-maps并使用react-native api进行地理定位.当我通过api使用位置时,在模拟器上返回的信息显示我在旧金山不在我所在的丹佛科罗拉多州.有没有理由为什么我的位置不会显示我在哪里?

我运行该位置的功能

  // Get current users locaiton on load
  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      console.log(position);
      let newLat = parseFloat(position.coords.latitude);
      console.log("newLat", newLat);
      let newLng = parseFloat(position.coords.longitude);
      console.log("newLng", newLng);
      // set region of user to lat and long position
      // deltas set distance from marker (zoom) on map
      this.setState({
        region: {
          latitude: newLat,
          longitude: newLng,
          latitudeDelta: 0.0250,
          longitudeDelta: 0.0125
        },
        error: null
      });
      console.log(this.state);
    }, 
      // if error set state with error
      (err) => {
        console.log(err),
        // set location accuracy on …
Run Code Online (Sandbox Code Playgroud)

ios ios-simulator apple-maps react-native react-native-maps

3
推荐指数
1
解决办法
4176
查看次数

Angular 4过滤器搜索自定义管道

所以我正在尝试构建一个自定义管道来对ngFor循环中的多个值进行搜索过滤.我已经花了好几个小时才找到一个好的工作示例,其中大多数是基于以前的版本,似乎没有用.所以我正在构建Pipe并使用控制台为我提供值.但是,我似乎无法显示输入文本.

以下是我以前寻找工作示例的地方:

角4管过滤器

http://jilles.me/ng-filter-in-angular2-pipes/

https://mytechnetknowhows.wordpress.com/2017/02/18/angular-2-pipes-passing-multiple-filters-to-pipes/

https://plnkr.co/edit/vRvnNUULmBpkbLUYk4uw?p=preview

https://www.youtube.com/results?search_query=filter+search+angular+2

https://www.youtube.com/watch?v=UgMhQpkjCFg

这是我目前的代码:

component.html

<input type="text" class="form-control" placeholder="Search" ngModel="query" id="listSearch" #LockFilter>

      <div class="panel panel-default col-xs-12 col-sm-11" *ngFor="let lock of locked | LockFilter: query">
        <input type="checkbox" ngModel="lock.checked" (change)="openModal($event, lock)" class="check" id="{{lock.ID}}">
        <label for="{{lock.ID}}" class="check-label"></label>
        <h3 class="card-text name" ngModel="lock.name">{{lock.User}}</h3>
        <h3 class="card-text auth" ngModel="lock.auth">{{lock.AuthID}}</h3>
        <h3 class="card-text form" ngModel="lock.form">{{lock.FormName}}</h3>
        <h3 class="card-text win" ngModel="lock.win">{{lock.WinHandle}}</h3>
      </div>
Run Code Online (Sandbox Code Playgroud)

pipe.ts

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'LockFilter'
})

export class LockFilterPipe implements PipeTransform {
  transform(locked: any, query: string): any { …
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular-pipe angular

3
推荐指数
1
解决办法
3万
查看次数

使用 forEach Angular 4 的多个 POST 请求

所以我试图在 Angular 中从数组中执行 POST 请求。基本上,当用户选择列表中的多个项目时,他们可以“解锁”每个项目。所以我遇到的问题是如何使用 forEach 进行 POST。我能够使用 forLoop 执行 POST,但问题是当它执行一个 POST 时,它不会执行另一个。有人可以指出我做错了什么,或者是否有更好的解决方案来解决这个问题?

以下是我查看的其他堆栈问题以找到可能的解决方案:

forEach 函数中的 Http 请求。角2

循环上的 Angular http 帖子

在for循环中以角度2链接http调用

组件.ts

locked: Array<any> = [];
// Unlock
  unlock() {
    let observer = {
      next(data) {
        data => console.log(data)
      },
      error(error) {
        return new Error('Post Error');
      },
      complete() {
        console.log("Completed");
        // window.location.reload();
      }
    }
    // On unlock send lock data to Service for POST
    this.http.postUnlock(this.unlocked).subscribe(observer);
  }
Run Code Online (Sandbox Code Playgroud)

服务.ts

// POST to UNLOCK RESOURCES
  postUnlock(locked) {
    let headers = new …
Run Code Online (Sandbox Code Playgroud)

javascript foreach http-post rxjs angular

1
推荐指数
1
解决办法
2566
查看次数