Question

有一些问题。首先，我无法加载或渲染任何图像，例如代码中的徽标。正在获取“您可能需要适当的加载程序来处理此文件类型错误。”我有一个疑问，我的webpack.config文件有问题，但是我无法弄清楚。其中有两个：

一个：

var webpack = require('webpack');
module.exports = {
  entry: './modules/index',
  output: {
    filename: 'dist/ReactHotAPI.js',
    libraryTarget: 'umd',
    library: 'ReactHotAPI'
  },
  plugins: [
    new webpack.optimize.OccurenceOrderPlugin()
  ]
};

秒：

module.exports = {
    module: {
        loaders: [
            { test: /\.css$/, loader: "style!css" },
            { test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
              loader: 'url-loader?limit=100000' }]},            { test: /\.jade$/, loader: "jade?self" }
        ]
    },
    node: {
        fs: "empty"
    }
}

我对添加图像类型进行了一些更改，但是我不确定我是否正确。

另一个问题。有几个文件： pages.js

import React from 'react';
import { browserHistory } from 'react-router';
import styles from './AutoComplete.css';

import AutoComplete from './AutoComplete';
import AutoComplete2 from './AutoComplete';

export default class LoginPage extends React.Component {
  signUp() {
    browserHistory.push('/home');
  }

  render() {
    return (
        <div className="App">
            <div className="Page-Component">
                <p className={styles.AutoComplete}><AutoComplete text="AutoComplete" /></p>
                <p className={styles.White}></p>
                <p className={styles.AutoComplete}><AutoComplete2 text="AutoComplete2" /></p>

            </div>
        </div>

    );
  }

}

和autocomplete.js

import React from 'react';
import './style.css';
import './AutoComplete.css';
//import './film.png';

export default class AutoComplete2 extends React.Component {
    constructor(props) {
        super(props);
        this.items = [
            'First',
            'Second',
            'Third',
            'Fourth',
            'Fifth',

        ];
        this.state = {
            suggestions: [],
            text: '',
        };
    }

    onTextChanged = (e) => {
        const value = e.target.value;
        let suggestions = [];
        if (value.length > 0) {
            const regex = new RegExp(`^${value}`, 'i');
            suggestions = this.items.sort().filter(v => regex.test(v));
            }
        this.setState (() => ({suggestions, text: value }));
    }

    SuggestionSelected (value) {
        this.setState (() => ({
            text: value,
            suggestions: [],
        }))
    }

    renderSuggestions () {
        const { suggestions } = this.state;
        if (suggestions.length === 0) {
            return null;
            }
        return (
            <ul>
                {suggestions.map((item) => <li onClick={() => this.suggestionSelected(item) }>{item}</li>)}
            </ul>
    );
}

    render() {
        const { text } = this.state;
        return (
            <div className="AutoComplete">
                <input value={text} onChange={this.onTextChanged} type="text" placeholder="&#61896; Enter movie name" charSet="utf-8" />

                {this.renderSuggestions()}
            </div>
        )
    }

    render() {
        const { text } = this.state;
        return (
            <div className="AutoComplete2">
                <input value={text} onChange={this.onTextChanged} type="text" placeholder="&#61896; Enter movie name" charSet="utf-8" />

                {this.renderSuggestions()}
            </div>
        )
    }
}

现在AC文本区域字段可以使用给定数组'First'，'Second'，'Third'，'Fourth'，'Fifth'，但是我希望数据将从api中获取，例如：GET：[ linkstarts = {search_text}＆linkends。

我应该进行哪些更改？

反应Api图像

0 个答案: