ReactTags fonctionne-t-il avec les applications React 16.12 ?

voix
0

Je voulais utiliser ReactTags avec mon application React 16.12 en suivant les instructions ici -- https://www.npmjs.com/package/react-tag-input . J'ai installé react-dnd 11.1.1 . Ci-dessous se trouve mon fichier package.json

{
  name: client,
  version: 0.1.0,
  private: true,
  dependencies: {
    @testing-library/jest-dom: ^4.2.4,
    @testing-library/react: ^9.4.0,
    @testing-library/user-event: ^7.2.1,
    bootstrap: ^4.4.1,
    jquery: ^1.9.1,
    react: ^16.12.0,
    react-bootstrap: ^1.0.0-beta.17,
    react-device-detect: ^1.12.1,
    react-dnd: ^11.1.1,
    react-dnd-html5-backend: ^11.1.1,
    react-dom: ^16.12.0,
    react-hamburger-menu: ^1.2.1,
    react-native-flash-message: ^0.1.15,
    react-router-dom: ^5.1.2,
    react-scripts: 3.3.1,
    react-tag-input: ^6.4.3,
    typescript: ^3.8.3
  },
  scripts: {
    start: react-scripts start,
    build: NODE_ENV=development react-scripts build,
    build:prod: NODE_ENV=production react-scripts build,
    test: react-scripts test,
    eject: react-scripts eject
  },
  eslintConfig: {
    extends: react-app
  },
  proxy: http://localhost:8000,
  browserslist: {
    production: [
      >0.2%,
      not dead,
      not op_mini all
    ],
    development: [
      last 1 chrome version,
      last 1 firefox version,
      last 1 safari version
    ]
  }
}

J'essaie d'implémenter les balises comme suit

import React from 'react';
import ReactDOM from 'react-dom';
import { WithContext as ReactTags } from 'react-tag-input';

const KeyCodes = {
  comma: 188,
  enter: 13,
};

const delimiters = [KeyCodes.comma, KeyCodes.enter];

class CoopTypes extends React.Component {
    constructor(props) {
        super(props);

        const tags = props.values.map(result => (
            {
                id: result.id,
                text: result.name
            }));
        this.state = {
            tags: tags,
            suggestions: props.values.map(result => ({
                id: result.id,
                text: result.name
            }))
        };
        this.handleDelete = props.handleDelete;
        this.handleAddition = props.handleAddition;
        this.handleDrag = this.handleDrag.bind(this);
    }

    handleDelete(i) {
        const { tags } = this.state;
        this.setState({
         tags: tags.filter((tag, index) => index !== i),
        });
    }

    handleAddition(tag) {
        this.setState(state => ({ tags: [...state.tags, tag] }));
    }

    handleDrag(tag, currPos, newPos) {
        const tags = [...this.state.tags];
        const newTags = tags.slice();

        newTags.splice(currPos, 1);
        newTags.splice(newPos, 0, tag);

        // re-render
        this.setState({ tags: newTags });
    }

    render() {
        const { tags, suggestions } = this.state;
        return (
            <div>
                <ReactTags tags={tags}
                    suggestions={suggestions}
                    handleDelete={this.handleDelete}
                    handleAddition={this.handleAddition}
                    handleDrag={this.handleDrag}
                    delimiters={delimiters} />
            </div>
        )
    }
};

export default CoopTypes;

mais je rencontre l'erreur ci-dessous lorsque je démarre mon application

TypeError: (0 , _reactDnd.DragDropContext) is not a function
./node_modules/react-tag-input/dist-modules/components/ReactTags.js
node_modules/react-tag-input/dist-modules/components/ReactTags.js:538
  535 | };
  536 | 
  537 | module.exports = {
> 538 |   WithContext: (0, _reactDnd.DragDropContext)(_reactDndHtml5Backend2.default)(ReactTags),
  539 |   WithOutContext: ReactTags,
  540 |   KEYS: _constants.KEYS
  541 | };
View compiled

Des idées sur la manière de traiter cette question ? Peut-être que le composant ne fonctionne plus avec les nouvelles versions de React ?

Créé 28/05/2020 à 18:21
source utilisateur
Dans d'autres langues...                            


1 réponses

voix
0

react-tag-inputreact-dnd qui est utilisée DragDropContextpour deprecated in v8 de react-dnd et vous devez donc utiliser une version inférieure de react-dnd dans votre application pour qu'elle fonctionne

Vous pouvez installer v7.6.2react-dndet react-dnd-html5-backend

"react-dnd": "^7.6.2",
"react-dnd-html5-backend": "^7.6.2",

Démo de travail

Créé 02/06/2020 à 15:58
source utilisateur

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more