Tag: reactjs

react.js用javascript改变输入值: 我想用javascript / jquery更改值，但是当我点击提交时，使用旧的初始值而不是我的新值。我无法更改反应代码，我只能使用javascript / jquery更改值，如下所示。 var value = “randomIntValue”; $(“input[data-reactid=’.0.2.0.0.0.0.0.2.0.0.3.0.3.0.0′]”).val(value).change(); 上面的代码不起作用！

reactState vs refs in react.js: 我在react中创建了选项卡，现在单击我必须更改选项卡类的选项卡类，如下所示： 1：有源 2：previousActive 3：alreadySelected 单击选项卡类时，它将变为active并检查是否在使用之前选择了已选择的类，并且删除了最后一个活动选项卡中的active类，如果尚未alreadySelected则添加alreadySelected 。响应中的一个选项卡的代码： var TabBody = React.createClass({ getInitialState: function() { return { class: ‘tabBody tab activeTab’ } }, render: function() { a.tabBody = this; return (React.createElement(‘div’, { className: this.state.class, ref: ‘body’, onClick: handleTabClick }, React.createElement(‘span’, {}, “Body”)) ); } }); 为了改变我正在做的标签的类有两种方式，并想知道哪个是有效的。代码风格一： var bodyClass = (a.tabBody.state.class).split(‘ ‘); var sleeveClass = (a.tabSleeve.state.class).split(‘ […]

使用React的jQuery选择器可以吗？: 我知道混合jQuery和ReactJS是不可取的，因为ReactJS不知道jQuery对DOM做出的任何修改。但是，如果您只使用jQuery查询DOM并轻松方便地查找节点，同时将所有DOM编辑保留给ReactJS，那该怎么办呢？除了jQuery是一个大型库，还有其他任何缺点吗？一个示例用例是每当下拉菜单组件安装该检查以查看用户是否单击菜单上的任何位置时设置事件侦听器，以便菜单可以关闭。 jQuery .parents()方法是检查单击目标是否是菜单容器元素的子项的非常方便的方法。有没有一种简单的方法可以在ReactJS或vanilla JavaScript执行此ReactJS ？以下是此示例的代码示例： handleClick = e => { const element = $(e.target) if( !( element.parents(‘.menu’).length || element.hasClass(‘menu’))) { this.setState({ menuOpen: false }) } } componentWillUpdate (nextProps, nextState) { if(nextState.menuOpen && !this.state.menuOpen) { document.addEventListener(‘click’, this.handleClick, false) } else if (!nextState.menuOpen && this.state.menuOpen) { document.removeEventListener(‘click’, this.handleClick, false) } }

未捕获的ReferenceError：未定义mountNode: 请原谅我，我到处搜索，我是反应中的新手，并尝试了一些例子。我有一个错误 Uncaught ReferenceError: mountNode is not defined 我在这里关注这个例子http://facebook.github.io/react/tips/initial-ajax.html 我的代码看起来像这样 Welcome to /** @jsx React.DOM */ var UserGist = React.createClass({ getInitialState: function() { return { username: ”, lastGistUrl: ” }; }, componentDidMount: function() { $.get(this.props.source, function(result) { var lastGist = result[0]; this.setState({ username: lastGist.owner.login, lastGistUrl: lastGist.html_url }); }.bind(this)); }, render: function() { return ( {this.state.username}last […]

REACT ERROR 不能作为的孩子出现。见（未知）> thead> th: 我正在开发一个react-rails应用程序，我在控制台中不断收到此错误： “` Warning: validateDOMNesting(…): cannot appear as a child of . See (unknown) > thead > th. 我不确定为什么这不起作用..我想使用标题（thead）表格，它适用于其他人。我会放tbody，但我需要那个表的实际主体。这是我这个表的代码： “` React.DOM.table className: ‘table table-bordered’ React.DOM.thead null, React.DOM.th null, ‘Description’ React.DOM.th null, ‘Actions’ React.DOM.tbody null, for post in @state.posts React.createElement Post, key: post.id, post: post, handleDeletePost: @deletePost **编辑我已经尝试在thead下添加tr标签，这会导致额外的错误增加。这就是我将代码更改为： “` React.DOM.table className: ‘table table-bordered’ React.DOM.thead […]

ReactJS componentDidMount + render: 我目前正在使用react来创建d3可视化。我对render和componenetDidMount方法之间的关系有点困惑（方法是正确的术语吗？）。这就是我所拥有的（为简单起见，我排除了一些代码）： var Chart = React.createClass({ componentDidMount: function () { var el = this.getDOMNode(); console.log(el); d3Chart.create(el, { width: ‘500’, height: ‘300’ }, this.getChartState(),this.getAccessState); }, render: function () { return ( ); } } 在第3行， el被赋予this.getDOMNode(); 它始终指向渲染函数中的顶级元素（ div “row pushdown” ）。那么this.getDOMNode()总是引用渲染函数中的顶级元素吗？我实际上要做的是在最里面的div （ .Chart ）中渲染d3图表。我首先尝试这样做this.getDOMNode().find(‘.Chart’)但是没有用。第一个问题：我知道我不应该尝试触摸真正的DOM，但是如何在VirtualDOM上选择更多内容呢？第二个问题：我知道，鉴于我对此很陌生，我可能做错了。你能建议一个更好的方法吗？第三个问题：我想在”.Chart”的兄弟div中添加一个图表图例。我应该为此创建一个新组件吗？或者在我的d3Chart中，我可以使用选择器来执行此操作吗？预先感谢您的帮助！ PS我有一个问题： […]

基于令牌的身份validation中的会话: 我正在PHP Lumen中构建一个应用程序，它在登录时返回一个令牌。我不知道如何超越这个。我该如何使用这些令牌维护会话？具体来说，如果我使用reactjs或vanilla HTML / CSS / jQuery，如何在我为Web应用程序的安全部分发出的每个请求中发送它们，如何在客户端存储令牌？

使用Ajax在React.js中提交表单: 在React.js中创建我的第一个应用程序，并希望将联系表单提交给使用Ajax的电子邮件。我已经将此解决方案用作指南： https ： //liusashmily.wordpress.com/author/liusashmily/但完整的组件文件不可用，只有部分而且我无法联系到作者。联系组件 // Create Component class Contact extends React.Component { constructor(props){ super(props); this.state = { contactEmail: ”, contactMessage: ” }; this.handleSubmit = this.handleSubmit.bind(this); this.handleChange = this.handleChange.bind(this); this.handleChangeMsg = this.handleChangeMsg.bind(this); } handleChange(event) { this.setState({ contactEmail: event.target.value, }); } handleChangeMsg(event) { this.setState({ contactMessage: event.target.value }); } handleSubmit(event) { event.preventDefault(); this.setState({ type: ‘info’, message: […]

如何使用semantic-ui与webpack做出反应？: 我想使用CommonJS在我的react jsx文件中包含semantic-ui。我在bower上安装了semantic-ui，并且正确配置了webpack以包含bower_components目录。但是，当我在jsx文件中使用require(‘semantic-ui/dist/semantic-ui.js’)时，控制台总是会抛出一个错误“Uncaught ReferenceError：jQuery is not defined”，即使我放了一个语句var jQuery = require(‘jquery/dist/jquery.js’) 。另一个相关的事情是，为了使语义ui工作，还应该包括semantic.css。我也想知道如何在jsx文件中包含semantic.css。

使用React更改textarea中的光标位置: 我在React有一个textarea，我想变成一个“记事本”。这意味着我希望“tab”键缩进而不是无焦点。我看了这个答案，但我不能让它与React一起工作。这是我的代码： handleKeyDown(event) { if (event.keyCode === 9) { // tab was pressed event.preventDefault(); var val = this.state.scriptString, start = event.target.selectionStart, end = event.target.selectionEnd; this.setState({“scriptString”: val.substring(0, start) + ‘\t’ + val.substring(end)}); // This line doesn’t work. The caret position is always at the end of the line this.refs.input.selectionStart = this.refs.input.selectionEnd = start […]