方法是这样的:我正在尝试将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来存储数据。
任何指导都将不胜感激:)