Question

我在Yeoman的项目上使用React，我不得不承认我不在我的深度。我正在制作一个网站，并在localhost：3000上进行托管测试。我希望能够上传文件，然后该文件将被复制到给定目录中。

的index.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Instance load Manager</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="icon" type="image/png" href="http://fountainjs.io/assets/imgs/fountain.png" />
  </head>
  <body>
    <div id="header">
      <input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
    </div>
    <!--[if lt IE 10]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
    <![endif]-->

    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Router, Route, browserHistory} from 'react-router';

import {Hello} from './app/hello';
import {Upload} from './app/upload';

import './index.scss';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Hello}/>
  </Router>,
  document.getElementById('root')
);

ReactDOM.moveFile(
  <Router history={browserHistory}>
    <Route path="/" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

upload.js

import React, {Component} from 'react';

export class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
      file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      return (
        <h2>{'Hello world!'}</h2>
      );
    }
  }
}

除了upload.js似乎根本没有做任何事情之外，一切正常。非常感谢。

Answer 1

由于您没有在该文件中定义render方法，因此每当我们创建任何component时，我们都需要定义render方法，即React所在的位置}开始创建ui。试试这个：

import React, {Component} from 'react';

export class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
      file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      console.log('hello in move file', file);
    }
  }

  render(){
      return(
           <div>
              Hello in upload.js
              <input type="file" id="file" name="files[]" multiple onchange={this.moveFile.bind(this)}/>
           </div>
      );
  }
}

<强>更新：

还要做这些改变：

*从index.html文件中删除这些行并将其放在upload.js：

中

<div id="header">
      <input type="file" id="file" name="files[]" multiple onchange="moveFile()" />
</div>

*您忘记在index.html中包含bundle.js文件

<script src='bundle.js'></script>

*删除以下行：

ReactDOM.moveFile(
  <Router history={browserHistory}>
    <Route path="/" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

*在某个不同的路线上渲染Upload组件，请使用：

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={Hello}/>
    <Route path="/upload" component={Upload}/>
  </Router>,
  document.getElementById('root')
);

使用以下组件：

app.js：

import React, {Component} from 'react';
import {Link} from 'react-router';

export default class Upload extends Component {

  render(){
      return(
           <div>
              Hello in app.js
              <br/>
              <Link to='/upload'>Go to upload component</Link>
           </div>
      );
  }
}

upload.js：

import React, {Component} from 'react';

export default class Upload extends Component {
  moveFile() {
    const file = document.getElementById('file').files[0];
    if (file) {
      //  getAsText(file);
     //file.copy(`$decodeURI("C:\\Users\\I329968\\Documents\\") / $file.displayName`);
      console.log('hello in move file', file);
    }
  }

  render(){
      return(
           <div>
              Hello in upload.js
              <input type="file" id="file" name="files[]" multiple onChange={this.moveFile.bind(this)}/>
           </div>
      );
  }
}

index.js：

import React from 'react';
import ReactDOM from 'react-dom';

import {Route, Router, IndexRoute, hashHistory, Link} from 'react-router';

import Upload from './upload';
import App from './app';

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
    <Route path="/upload" component={Upload}/>
  </Router>,
  document.getElementById('app')
);

的index.html：

<!DOCTYPE html>
<html>
    <head>
        <title>View</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1"/>   
    </head>

    <body>

        <div id="app"></div>
        <script src = "bundle.js"></script>
    </body>
</html>

Javascript复制文件

1 个答案: