1 

import React, { Component } from 'react';
import ChatBot from 'react-simple-chatbot';
import { Switch, Route, BrowserRouter } from 'react-router-dom';
import Dropzone from 'react-dropzone';

class Form extends Component {

  constructor(props){
    super(props);

    this.state = {
      // some other states
      file: ''
    };
  }
  
  onDrop(acceptedFiles){
    var file = acceptedFiles[0];
    const reader = new FileReader();
    reader.onload = () => {
      const fileAsBinaryString = reader.result;
      this.setState({
        file: fileAsBinaryString
      });
      
      //console.log(fileAsBinaryString);
    }

    reader.readAsBinaryString(file);

    //console.log(file);
  }
  
  render() {
    return(
      <ChatBot
        steps={[
          {
            id: '1',
            message: 'You can add custom components',
            trigger: '2',
          },
          {
            id: '2',
            component: (
              <div>
                 <Dropzone onDrop={this.onDrop.bind(this)} />
              </div>
            ),
            end: true,
          },
        ]}
      />
    )
  
  }

}

警告我正在尝试在 react-simple-chatbot 中使用 react-dropzone，但是当我上传文件时，它会显示 2 个警告：

  1. React does not recognize the previousStep prop on a DOM element.

  2. React does not recognize the triggerNextStepenter image description here prop on a DOM element.

我能够找到类似的问题，但他们的解决方案不适合我。我应该如何使它工作？

编辑：我添加了一个类似于我的方法的示例。

4

1 回答 1

0

你好亲爱的你的问题我不清楚，因为它缺乏很多信息，如果你把你的代码放在这里会更好。我不知道您是否遵循 react-dropzone 文档。在他们的文档中，他们清除了如何在您的应用程序中使用它。尝试执行以下程序。就我而言，它正在工作而没有显示任何警告。

import Dropzone from 'react-dropzone'
//OTHERS IMPORT FILE
// ... ... ...
class AddEmployee extends Component {
    constructor(props) {
        super(props);
        this.state = {
            photo: ""
        }
    }
    // OTHERS FUNCTIONS
    // ... ... ....
    onDrop(files) {
        const file = files.find(f => f)
        let reader = new FileReader()
        reader.readAsDataURL(file)
        reader.onload = () => {
            this.setState({
                photo: reader.result,
            })
        }
    }

    render() {
        return (
            // OTHERS DIV
            // ... ... ... ...
            <div className="dropzone">
                <Dropzone onDrop={(e) => this.onDrop(e)}>
                    {this.state.photo != "" ? <img width={195} height={195} src={this.state.photo} /> : <p>Try dropping some photo here or click to select files to upload</p>
                    }
                </Dropzone>
            </div>

            // OTHERS DIV
            // ... ... ... ...
        )
    }
}
于 2018-05-08T10:55:10.670 回答