O ReactTags funciona com as aplicações do React 16.12?

votos
0

Eu queria usar ReactTags com a minha aplicação React 16.12 seguindo as instruções aqui -- https://www.npmjs.com/package/react-tag-input . Eu instalei o React 11.1.1 . Abaixo está o meu ficheiro 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
    ]
  }
}

Estou a tentar implementar as etiquetas desta forma

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;

mas estou a encontrar o erro abaixo quando inicio a minha aplicação

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

Alguma ideia de como abordar isto? Talvez o componente não funcione mais com versões mais recentes do React?

Publicado 28/05/2020 em 18:21
fonte usuário
Em outras línguas...                            


1 respostas

votos
0

react-tag-input utilização DragDropContexta partir react-dndda qual é deprecated in v8 de reação e, portanto, você precisa usar uma versão inferior em reação na sua aplicação para que ela funcione

Você pode instalar v7.6.2de react-dnde react-dnd-html5-backend

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

Demonstração de trabalho

Respondeu 02/06/2020 em 15:58
fonte usuário

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