将jQuery插件集成到React

时间:2018-11-14 17:27:57

标签: reactjs jquery-plugins integration

方法是这样的:我正在尝试将FontAwesome IconPicker(一个jQuery插件)集成到我正在从事的React项目中。

这是到目前为止我得到的:

import '../../../node_modules/fontawesome-iconpicker/dist/js/fontawesome-iconpicker';
import $ from 'jquery';

class IconControl extends Component {

    componentDidMount() {
        this.$el = $( this.el );
        this.$el.iconpicker();

        this.handleChange = this.handleChange.bind( this );
        this.$el.on( 'change', this.handleChange );
    }

    componentDidUpdate( prevProps ) {
        if ( prevProps.icon !== this.props.icon ) {
            this.$el.trigger( 'iconpicker:updated' );
        }
    }

    componentWillUnmount() {
        this.$el.off( 'change', this.handleChange );
        this.$el.iconpicker( 'destroy' );
    }

    handleChange(e) {
        this.props.onChange( e.target.value );
    }

    render() {

        const {
            attributes: {
                icon,
                description,
            },
        } = this.props;

        return (
            <input
                type="text"
                value={ icon }
                ref={ el => this.el = el }
            />
        );
    }

}

export default IconControl;

我已经阅读了关于integrating with other libraries的React文档,但是我仍然不清楚如何实现这一目标。我设法使图标选择菜单显示出来并从中选择一个图标,但是我不知道如何使用这个特定的插件和React来存储数据。

任何指导都将不胜感激:)

0 个答案:

没有答案