Tag: reactjs

jquery-InputMast覆盖输入字段上的现有事件: 在下面的代码中，我在id“phone_world”上附加了onChange（）事件，并在其上应用了输入掩码。输入桅杆工作正常，但不会调用删除现有的事件和hello函数。 Страны мира var listCountries = $.masksSort($.masksLoad(“https://cdn.rawgit.com/andr-04/inputmask-multi/master/data/phone-codes.json”), [‘#’], /[0-9]|#/, “mask”); var maskOpts = { inputmask: { definitions: { ‘#’: { validator: “[0-9]”, cardinality: 1 } }, showMaskOnHover: false, autoUnmask: true, clearMaskOnLostFocus: false }, match: /[0-9]/, replace: ‘#’, listKey: “mask” }; var maskChangeWorld = function(maskObj, determined) { if (determined) { var hint = maskObj.name_ru; if […]

语义UI模态组件onClose与React: 我需要一种方法来定义语义模式上的行为，它在关闭时执行。我现在正在做的是使用“门户”，但我认为“onClick”事件不起作用，因为这些html元素不在反应之中。我有： componentDidMount() { console.log(‘mounting modal’, this); this.node = React.findDOMNode(this); this.$modal = $(this.node); this.$icon = $(“”); this.$header = $(“”).html(this.props.header); this.$content = $(“”); this.$modal.append(this.$header); this.$modal.append(this.$icon); this.$modal.append(this.$content); this.renderDialogContent(this.props); } componentWillReceiveProps(newProps) { this.renderDialogContent(newProps); } renderDialogContent(props) { props = props || this.props; React.render({props.children}, this.$content[0]); if (props.isOpen) { this.$modal .modal(‘setting’, ‘closable’, false) .modal(‘show’); } else { this.$modal.modal(‘hide modal’); } […]

React-Rails中的PATCH AJAX请求中的ERR_EMPTY_RESPONSE: 我正在尝试通过我的应用程序中的表单更新基本数据库。通过此AJAX调用处理更新： handleUpdate (e) { let url = ‘/sites/’ + this.props.site.id; let site = { name: this.refs.name.value, city: this.refs.city.value, state: this.refs.state.value, country: this.refs.country.value, }; e.preventDefault(); $.ajax({ method: ‘PATCH’, url: url, data: {site: site}, success: (site) => { console.log(“success”); } }); } 控制器： def update @site = Site.find(params[:id]) if @site.update_attributes(site_params) redirect_to(‘index’) else render(‘edit’) end end 当我点击更新时，我收到此错误： […]

来自组件中的ajax的提取数据未在React中呈现: 在此之后。我创建了一个组件，并尝试使用ajax请求获取数据。我已经编写了用于呈现它的代码，但它不起作用，并且在页面加载后也没有错误。我是新来的反应，所以没有多少想法，可能这就是无法检查问题的原因。任何帮助都会很棒。 // Js React.createElement(‘tbody’, {}, UserItem) // Component var UserItem = React.createClass({ propTypes: { name: React.PropTypes.string.isRequired, email: React.PropTypes.string, dob: React.PropTypes.string, }, getInitialState: function() { return { users: [] } }, showResults: function(response) { this.setState({ users: response }) }, search: function(URL) { $.ajax({ type: “GET”, dataType: ‘json’, url: URL, success: function(response){ this.showResults(response); […]

将JQuery代码应用于组件内的元素: 我有一个应用程序，我正在使用React。我现在有一个问题，我正在尝试实现bootstrap-wysiwyg / bootstrap3-wysiwyg包。为了使我的能够作为ootstrap-wysiwyg/bootstrap3-wysiwyg文本编辑器工作，我需要在文本编辑器上运行以下JQuery函数： $(“.textarea”).wysihtml5() 这是我的组件： import React, { Component } from ‘react’ export class MyTextEditor extends Component { render() { return ( ) } } 如何将JQuery函数应用于React组件中的？我知道混合使用React和JQuery并不是一个很好的做法，但我真的需要这个才能工作。如果有一种替代方法可以使程序包运行，我会很高兴作为答案。否则，如果有人可以帮我这个工作，将不胜感激！更新:( 还在看）感谢所有的建议。我尝试了一堆，但他们都导致了问题：根本不能很好地显示，按钮是巨大的。给了我： Uncaught Error: addComponentAsRefTo(…): Only a ReactOwner can have refs. Syam Mohan的回答给了我： Uncaught TypeError: Cannot read property ‘font-styles’ […]

如何从Django检索/提供CSRF令牌作为API: 我正在开发一个使用Django REST框架作为后端的项目（比如api.somecompany.com但是有一个React.js前端（ www.somecompany.com ），而Django没有提供AJAX请求。因此，我无法使用Django的传统方法让模板包含CSRF令牌，如 {% csrf_token %} {% csrf_token %} 我可以向Django REST Framework的api-auth\login\ url发出请求，它将返回此标头： Set-Cookie:csrftoken=tjQfRZXWW4GtnWfe5fhTYor7uWnAYqhz; expires=Mon, 01-Aug-2016 16:32:10 GMT; Max-Age=31449600; Path=/ Set-Cookie:csrftoken=tjQfRZXWW4GtnWfe5fhTYor7uWnAYqhz; expires=Mon, 01-Aug-2016 16:32:10 GMT; Max-Age=31449600; Path=/ Set-Cookie:csrftoken=tjQfRZXWW4GtnWfe5fhTYor7uWnAYqhz; expires=Mon, 01-Aug-2016 16:32:10 GMT; Max-Age=31449600; Path=/ – 但我无法检索此cookie以使用X-CSRFToken发回我的AJAX请求（我的理解是单独的子域），并且它似乎不会自动包含。这是我的相关代码： // using jQuery function getCookie(name) { var cookieValue = null; if (document.cookie && document.cookie != ”) […]

jsx中的格式编号React组件: 我正在编写一个jsx文件，并希望格式化表格中的数字显示。这是表的代码： {stringVar} {numberVar} numberVar正在直接打印; 如何用C风格的字符串格式显示该数字（我需要设置精度值，添加逗号和$字符）？

React项目中的Bootstrap需要jQuery: 我正在开发一个React.js项目，而不是使用React-Bootstrap，我将Bootstrap的CSS加载到我的项目中。我现在需要导入jQuery，以便我可以使用下拉菜单等。入口点文件（index.js） – 希望它能工作 ‘use strict’ import React from ‘react’ import { Route, Router, IndexRoute, browserHistory } from ‘react-router’ import { render } from ‘react-dom’ // Pages import Main from ‘./pages/main/main’ import Home from ‘./pages/home/home’ import About from ‘./pages/about/about’ window.jQuery = window.$ = require(‘jquery/dist/jquery.min’) import ‘../node_modules/bootstrap/dist/css/bootstrap.min.css’ import ‘../node_modules/bootstrap/dist/js/bootstrap.min.js’ render(( ), document.getElementById(‘app’)) Webpack文件 ‘use strict’ […]

将jQuery插件与React集成: 我在我的React App中使用jQuery nestable插件 https://dbushell.com/Nestable/ 。我知道在React中使用jQuery时会出现问题。 jQuery nestable解决了我的业务需求，无法找到反应拖动/嵌套组件的确切要求。所以我使用了这个jQuery插件。真正的问题是：在使用这个jQuery插件拖动一个元素时，它会克隆DOM，除此之外一切都在做出反应。初始化了jQuery可嵌套function，如下所示： componentDidMount() { this.$node = $(this.nestable); // this.nestable is a ref this.$node.nestable({ group: 1, maxDepth: 4, expandBtnHTML:””, collapseBtnHTML:”” }); } 上面的代码将让我在所有其他DOM元素中拖动group2，如下图所示： group2是这里的可拖动元素。拖动后，我可以看到group2出现了两次，我猜jQuery插件克隆拖动的元素，如下所示：在开发人员工具中：但在反应开发人员工具中，我可以看到DOM是正确的。我不知道，如何纠正这个问题。我无法在此更新完整代码，因为代码库很大。在反应开发工具中，我可以看到DOM是正确的，而在本机DOM中则不行！是否可以在setState之后用虚拟DOM替换本机DOM，或者是否可以对jQuery处理的跟踪DOM做出反应？我接受@ Patrick Evans的评论，我在这里寻找一个解决方案或者像jQuery nestable这样的基于反应的组件。对此有任何帮助将有所帮助。

使用jQuery反应组件而不需要 – jestunit testing: 我有一个非常简单的React mixin，它使用jQuery来触发事件 MyMixin = { trackStructEvent: function () { args = Array.prototype.slice.call(arguments); $(‘body’).trigger(‘myEvent’, args); } module.exports = MyMixin 使用browserify将其作为一组新组件的一部分导入主站点。由于拥有这些组件的主站点将始终包含jQuery，我不希望jQuery与browserify一起使用，因为它将被复制。这在行为方面不是问题 – 但是在运行jest以使用此mixin抛出错误来对组件进行unit testing时会导致问题。 ReferenceError: $ is not defined 我知道我可以通过浏览器包含jQuery来解决这个问题，但这会将2个副本加载到我的网站中。有没有什么方法可以告诉我的反应组件jQuery已经存在于窗口而不用担心它？