草庐IT

UI组件库

全部标签

javascript - 将 Facebook Web SDK 与 ReactJS 组件状态集成

我开始使用ReactJS、NodeJS、Webpack和FacebookSDK进行用户身份验证。所有这些技术及其相关的软件工程原则/最佳实践对我来说都是相对较新的(甚至JavaScript对我来说也是相当新的)。我已经按照这里的教程https://developers.facebook.com/docs/facebook-login/web进行操作,并且我的Facebook身份验证工作得很好!但是本教程内容的结构方式,在我看来,SDK的设计只是为了期望FB状态响应处理程序包含在标记内的原始页面HTML中。以下内容特别提到了这一点://LoadtheSDKasynchronously(f

javascript - 将 Sweet Alert 弹出窗口添加到 React 组件中的按钮

我找到了这个完美的用于Bootstrap和React的SweetAlert模块(我正在我的Meteor应用程序中使用):http://djorg83.github.io/react-bootstrap-sweetalert/但我不明白您如何将此代码包含在React组件中。当有人在我的应用程序中单击“删除”按钮时,我希望弹出SweetAlert提示以请求确认。这是删除按钮的组件:importReact,{Component}from'react';importGoalsfrom'/imports/collections/goals/goals.js'importSweetAlertfro

javascript - 检测点击是否在 react 组件内部或不在 typescript 中

我大致有以下几点:componentDidMount(){document.querySelector('body')!.addEventListener('click',this.click);}click=(e:Event)=>{if(this.state.toggled){if(!ReactDom.findDOMNode(this.someRef).contains(e.target)){this.setState({toggled:false});}}};render(){return({this.someRef=e;}}/>)}此代码正确检测用户是在CustomElement

javascript - 自定义日期组件的重构代码

我创建了一个日期组件(底部的工作GIF)。代码的工作没有问题,但我写的代码看起来很乱,其他人很难理解。注意:请看下面的GIF。另外,忽略样式这就是我正在做的。对于屏幕中的日期组件,我正在创建这样的引用和状态classOnBoardingextendsPureComponent{constructor(props){super(props)this.d1=React.createRef()this.d2=React.createRef()this.d3=React.createRef()this.d4=React.createRef()this.d5=React.createRef()t

javascript - ember js 组件观察器不起作用

我在emberjs组件中有一个场景,其中observe没有被击中。我想出了原因“设置观察到的组件属性时,组件尚未插入。”我的问题是,在emberjs中可以用更好的方式处理这个问题吗?更好的解释可以在下面的jsbin中找到。NotworkingScenarioWorkingscenario 最佳答案 您可以指定.on('init')强制观察者在初始化后立即运行;否则就像提到的@Kingpin2k-他们不运行App.TextboxDisplayComponent=Ember.Component.extend({displayText:'

javascript - 基于选择下拉列表的 Angular 2-Filtering 表(两者都是不同的组件)

我正在尝试根据选择下拉组件传递的值来过滤数据表组件。我正在使用@Input()属性,但所选的下拉数据未传递给数据表组件。如果通过,我将能够使用以下逻辑过滤表格:不确定我哪里做错了。onChangeDetected(val){this.someData=this.someData.filter(x=>x.value==val)}可以找到完整的实现here 最佳答案 我已在thisplunker中更正了您的问题.现在数据已传递,数据会根据您选择的值发生变化。随意环顾四周并在Angular的网站上寻找解释。//Mandatorycodew

javascript - 将数据从 Java/JSF2 bean 传递到 Javascript/jQuery 组件作为返回值的最佳方法

我无法确定将数据从Java支持/托管bean传递到jQuery/Javascript组件(例如Highcharts)的最佳方法,以便我的网络应用程序以动态、实时的方式生成/显示数据。我在Java方面非常扎实,但我对JavaScript/jQuery的了解非常有限,这显然是我失败的地方。据我所知,最好的方法是在我的网络应用程序上对一个隐藏字段进行Ajax化并传递一个JSON对象或字符串?进入它,然后将该值传递到我的JS组件中。首先,这似乎有点费力,因为我需要一个Ajax调用来更新JSON数据,然后调用setInterval将数据重新读取到JS组件中?我希望我可以将数据直接传递到JS组件中

javascript - 如何将值从 ui-gmap-windows InfoWindow/Marker 传递到 ui-sref?

我正在尝试使用angular-google-maps模块的ui-gmap-windows在Googlemap上的信息窗口内创建链接。在我的HTML模板中,我有:{{title}}在我的Controller中,我有:uiGmapGoogleMapApi.then(function(maps){vm.itemlist=search.getItemList();varmarkers=[];_.each(vm.itemlist,function(item){search.getGeometry(item.href).then(function(marker){marker.title=item

javascript - 当 ui-router 状态改变时运行 javascript 函数?

在Angular应用程序中,我使用ui-router来处理导航等。在一个单独的脚本文件中,我有一个这样的函数;$(function(){functiondoSomething(){if($('.thisclass').length){$('.thisclass').css({'height':someHeight});}}});我的问题是,每当状态发生变化时,我都想运行上面的函数。但是因为它不是任何Angular函数的一部分,所以当我引用它时出现错误,因为我找不到它。我应该做什么,而不是上面的? 最佳答案 您好,您还可以将您的jqu

javascript - 商店状态更改时 React 组件不更新

下面是我的组件类。该组件似乎永远不会执行componentWillUpdate(),即使我可以在mapStateToProps返回之前通过记录看到状态更新。状态100%发生变化,但组件不会刷新。importReact,{Component}from'react'import{connect}from'react-redux'import{search}from'./mapActions'importLfrom'leaflet'classMapextendsComponent{componentDidMount(){L.Icon.Default.imagePath='./images't