Questions tagged «reactjs»

我得到了一种用于创建，读取，更新和删除的表单。我用相同的形式创建了3个组件，但它们传递了不同的道具。我得到了CreateForm.js，ViewForm.js（带有删除按钮的只读）和UpdateForm.js。 我以前使用过PHP，所以我总是以一种形式进行操作。 我使用React和Redux来管理商店。 当我进入CreateForm组件时，我将这些道具传递给子组件，createForm={true}以使其不使用值填充输入并且不禁用它们。在我的ViewForm组件中，我传递了props readonly="readonly"。 而且我遇到了一个文本区域，该区域充满了一个值并且无法更新。具有值的React textarea是只读的，但需要更新 只有一个组件来处理表单的这些不同状态的最佳结构是什么？ 您有什么建议，教程，视频，演示可以分享吗？

128 javascript  reactjs  crud  redux 

我有带有labels的表单元素，并且我希望有唯一的ID将labels 链接到具有htmlForattribute的元素。像这样： React.createClass({ render() { const id = ???; return ( <label htmlFor={id}>My label</label> <input id={id} type="text"/> ); } }); 我曾经根据生成ID，this._rootNodeID但自从React 0.13起就不可用了。现在最好和/或最简单的方法是什么？

128 reactjs 

我正在用Jasmine Enzyme浅层渲染测试React组件。 为了这个问题的目的在这里简化了... function MyOuterComponent() { return ( <div> ... <MyInnerComponent title="Hello" /> ... <MyInnerComponent title="Good-bye" /> ... </div> ) } MyOuterComponent有2个实例，MyInnerComponent我想在每个实例上测试道具。 第一个我知道如何测试。我用find用first... expect(component.find('MyInnerComponent').first()).toHaveProp('title', 'Hello'); 但是，我正在努力测试的第二个实例MyInnerComponent。 我希望像这样的事情可以工作... expect(component.find('MyInnerComponent').second()).toHaveProp('title', 'Good-bye'); 甚至这个... expect(component.find('MyInnerComponent')[1]).toHaveProp('title', 'Good-bye'); 但是，上述两种工作当然都没有。 我觉得我想念显而易见的东西。 但是，当我浏览文档时，没有看到类似的示例。 任何人？

128 reactjs  jasmine  enzyme 

在学习ReactJS时，我多次听到“ mount”一词。与此术语相比，似乎存在生命周期方法和错误。通过安装，React到底意味着什么？ 例子： componentDidMount() and componentWillMount()

128 javascript  reactjs 

是否可以将SVG标记嵌入到ReactJS组件中？ render: function() { return ( <span> <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ... </span> ); } 结果错误： 不支持命名空间属性。ReactJSX不是XML。 最简单的方法是这样做。使用React React之类的东西对于我想做的事情来说是过大的手段。

127 javascript  svg  reactjs 

我想构建一个聊天系统，并在进入窗口和收到新消息时自动滚动到底部。如何在React中自动滚动到容器的底部？

127 reactjs 

我有一个react / redux应用程序，可从api服务器获取令牌。用户验证之后，我想使所有axios请求都将该令牌作为Authorization标头，而不必手动将其附加到操作中的每个请求。我对React / Redux相当陌生，并且不确定采用最佳方法，也没有在Google上找到任何高质量的点击。 这是我的redux设置： // actions.js import axios from 'axios'; export function loginUser(props) { const url = `https://api.mydomain.com/login/`; const { email, password } = props; const request = axios.post(url, { email, password }); return { type: LOGIN_USER, payload: request }; } export function fetchPages() { /* here is …

127 reactjs  redux  axios 

我是ReactJS和UI的新手，我想知道如何从ReactJS代码进行基于REST的简单POST调用。 如果有任何示例，那将非常有帮助。

126 reactjs  reactjs-flux  reactjs-native 

我刚刚发现，在React this.setState()函数中，任何组件中的函数都是异步的，或者在完成其调用的函数后被调用。 现在我搜索并找到了这个博客（setState（）状态更改操作在ReactJS中可能是同步的） 在这里，他发现setState是async（在堆栈为空时调用）或sync（在调用后立即调用），具体取决于触发状态更改的方式。 现在这两件事很难消化 在博客中，该setState函数在一个函数内部被调用updateState，但是触发该updateState函数的并不是被调用函数知道的东西。 他们为什么要使setState异步，因为JS是单线程语言，而此setState不是WebAPI或服务器调用，因此只能在JS的线程上完成。他们这样做是为了使Re-Rendering不会停止所有事件侦听器和其他操作，或者存在其他设计问题。

126 javascript  multithreading  asynchronous  reactjs 

我试图在ReactJS组件中使用event.stopPropagation（）来阻止单击事件冒泡并触发遗留代码中与JQuery关联的click事件，但是似乎React的stopPropagation（）只能停止传播到事件也附加在React中，并且JQuery的stopPropagation（）不会停止传播到随React附加的事件。 有什么办法可以使stopPropagation（）在这些事件中起作用？我编写了一个简单的JSFiddle来演示这些行为： /** @jsx React.DOM */ var Propagation = React.createClass({ alert: function(){ alert('React Alert'); }, stopPropagation: function(e){ e.stopPropagation(); }, render: function(){ return ( <div> <div onClick={this.alert}> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on React Event</a> </div> <div className="alert"> <a href="#" onClick={this.stopPropagation}>React Stop Propagation on JQuery Event</a> </div> <div onClick={this.alert}> <a href="#" …

126 javascript  jquery  reactjs 

我是一名javascript / redux / react初学者，使用redux，react-redux和react构建一个小型应用程序。出于某种原因，当在连接（反应-redux绑定）的同时使用mapDispatchToProps函数时，我收到一个TypeError，指示我尝试执行生成的prop时，dispatch不是函数。但是，当我将调度作为道具调用时（请参阅提供的代码中的setAddr函数），它可以工作。 我很好奇这是为什么，在redux docs的示例TODO应用程序中，mapDispatchToProps方法是以相同的方式设置的。当我在函数内部进行console.log（dispatch）时，它说dispatch是类型对象。我可以继续以这种方式使用调度，但是在继续使用redux之前，我会更好地知道为什么会这样。我正在将webpack与babel-loaders一起使用进行编译。 我的代码： import React, { PropTypes, Component } from 'react'; import { connect } from 'react-redux'; import { setAddresses } from '../actions.js'; import GeoCode from './geoCode.js'; import FlatButton from 'material-ui/lib/flat-button'; const Start = React.createClass({ propTypes: { onSubmit: PropTypes.func.isRequired }, setAddr: function(){ this.props.dispatch( setAddresses({ pickup: …

124 javascript  reactjs  redux  react-redux 

如何在reactjs上检测Esc按键？类似于jquery $(document).keyup(function(e) { if (e.keyCode == 27) { // escape key maps to keycode `27` // <DO YOUR WORK HERE> } }); 一旦检测到，我想将信息传递给组件。我有3个组件，其中最后一个活动组件需要对逃逸键的反应做出反应。 我在想一种组件激活时的注册方式 class Layout extends React.Component { onActive(escFunction){ this.escFunction = escFunction; } onEscPress(){ if(_.isFunction(this.escFunction)){ this.escFunction() } } render(){ return ( <div class="root"> <ActionPanel onActive={this.onActive.bind(this)}/> <DataPanel onActive={this.onActive.bind(this)}/> <ResultPanel onActive={this.onActive.bind(this)}/> …

124 javascript  reactjs 

我正在与之合作create-react-app，遇到了这个问题Home does not contain an export named Home。 这是我设置App.js文件的方式： import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; import { Home } from './layouts/Home' class App extends Component { render() { return ( <div className="App"> Hello <Home /> </div> ) } } export default App; 现在在我的layouts文件夹中有Home.js文件。如下所示进行设置。 …

123 javascript  reactjs  ecmascript-6  create-react-app 

两者都有路由，链接等。何时使用一个或另一个？我真的很困惑在哪里使用每个。服务器端？客户端？ https://reacttraining.com/react-router/ 在某些示例中，您需要传递历史记录，而在其他示例中则不需要。该怎么办？ <Router history={browserHistory}> 与 <Router> 何时使用一个或另一个非常令人困惑，任何帮助都值得赞赏。

123 reactjs  react-router 

可以说我有一些状态依赖于其他状态（例如，当A更改时，我希望B更改）。 创建一个观察A并将B设置在useEffect钩内的钩子是否合适？ 效果是否会级联，从而在我单击按钮时会触发下一个效果，从而导致b发生变化，从而导致第二个效果在下一次渲染之前触发？这样构造代码是否有性能下降？ let MyComponent = props => { let [a, setA] = useState(1) let [b, setB] = useState(2) useEffect( () => { if (/*some stuff is true*/) { setB(3) } }, [a], ) useEffect( () => { // do some stuff }, [b], ) return ( <button onClick={() => …

123 javascript  reactjs  react-hooks