Questions tagged «reactjs»

如何在react.js中选择某些栏？ 这是我的代码： var Progressbar = React.createClass({ getInitialState: function () { return { completed: this.props.completed }; }, addPrecent: function (value) { this.props.completed += value; this.setState({ completed: this.props.completed }); }, render: function () { var completed = this.props.completed; if (completed < 0) { completed = 0 }; return (...); } 我想使用这个React组件： var …

202 javascript  reactjs  getelementbyid 

我的render函数中有一个简单的表单，如下所示： render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={this.handleLogin}>Login</button> </form> ); }, handleLogin: function() { //How to access email and password here ? } 我应该在handleLogin: function() { ... }访问Email和Password字段中写些什么？

199 javascript  html  reactjs  frontend 

当我运行一个本机反应项目时，我得到一个错误no bundle URL present，但是我不知道自己犯了什么错误，我感到非常困惑。

199 ios  reactjs  react-native 

我有点新反应。我看到我们必须导入两件事才能开始，React并且ReactDOM，谁能解释其中的区别。我正在阅读React文档，但没有说。

196 reactjs  react-dom 

在处理类似于Facebook的内容提要的React应用程序组件中，我遇到了一个错误： Feed.js：94未定义的“ parsererror”“ SyntaxError：JSON中位置0处的意外令牌< 我遇到了一个类似的错误，事实证明这是render函数中HTML的错字，但这里似乎并非如此。 更令人困惑的是，我将代码回滚到了较早的已知工作版本，但仍然出现错误。 Feed.js： import React from 'react'; var ThreadForm = React.createClass({ getInitialState: function () { return {author: '', text: '', included: '', victim: '' } }, handleAuthorChange: function (e) { this.setState({author: e.target.value}) }, handleTextChange: function (e) { this.setState({text: e.target.value}) }, handleIncludedChange: function (e) { this.setState({included: e.target.value}) …

196 javascript  jquery  json  reactjs 

是否可以在减速器本身中调度动作？我有一个进度栏和一个音频元素。目的是在音频元素中的时间更新时更新进度条。但是我不知道在哪里放置ontimeupdate事件处理程序，或者如何在ontimeupdate的回调中分派动作来更新进度条。这是我的代码： //reducer const initialState = { audioElement: new AudioElement('test.mp3'), progress: 0.0 } initialState.audioElement.audio.ontimeupdate = () => { console.log('progress', initialState.audioElement.currentTime/initialState.audioElement.duration); //how to dispatch 'SET_PROGRESS_VALUE' now? }; const audio = (state=initialState, action) => { switch(action.type){ case 'SET_PROGRESS_VALUE': return Object.assign({}, state, {progress: action.progress}); default: return state; } } export default audio;

195 reactjs  redux  reducers 

我正在创建具有flux体系结构的react.js应用程序，并且试图弄清楚应该何时何地从服务器请求数据。是否有任何示例。（不是TODO应用！）

194 javascript  reactjs  reactjs-flux 

目前验证Date反应道具的首选方式是什么？ 现在我正在使用： React.PropTypes.object 但是，这现在违反了禁止道具类型棉绒规则。我应该使用shape还是有更好的方法？

194 reactjs 

当反应组件状态改变时，将调用render方法。因此，对于任何状态更改，都可以在渲染方法主体中执行操作。那么setState回调是否有特定的用例？

191 reactjs  callback  setstate 

我正在使用数据对象作为ReactJS中组件的道具。 <Field data={data} /> 我知道容易验证PropTypes对象本身： propTypes: { data: React.PropTypes.object } 但是，如果我想验证其中的值怎么办？即。data.id，data.title？ props[propName]: React.PropTypes.number.required // etc...

191 reactjs 

@connect当我尝试在React组件中访问商店时，它的工作效果很好。但是我应该如何通过其他一些代码来访问它。例如：假设我想使用授权令牌创建可以在我的应用程序中全局使用的axios实例，那么实现这一目标的最佳方法是什么？ 这是我的 api.js // tooling modules import axios from 'axios' // configuration const api = axios.create() api.defaults.baseURL = 'http://localhost:5001/api/v1' api.defaults.headers.common['Authorization'] = 'AUTH_TOKEN' // need the token here api.defaults.headers.post['Content-Type'] = 'application/json' export default api 现在我想从我的商店访问一个数据点，这是如果我尝试使用以下方法在react组件中获取数据点的情况： @connect // connect to store @connect((store) => { return { auth: store.auth } }) export default …

191 reactjs  redux  react-redux 

才知道，从阵营v15.3.0，我们有一个新的基类叫PureComponent与扩展PureRenderMixin内置。我了解的是，在幕后，它对内部的道具进行了浅浅的比较shouldComponentUpdate。 现在，我们有3种方法来定义React组件： 功能性无状态组件，不扩展任何类 扩展PureComponent类的组件 扩展Component类的常规组件 一段时间以前，我们曾经将无状态组件称为“纯组件”，甚至称为“哑组件”。似乎“纯”一词的整个定义现在已经在React中改变了。 尽管我了解这三者之间的基本区别，但是我仍然不确定何时选择什么。还有每种性能影响和权衡取舍是什么？ 更新： 这些是我希望得到澄清的问题： 我应该选择将我的简单组件定义为功能性的（出于简单性考虑）还是扩展PureComponent类（出于性能的考虑）？ 我所获得的性能提升是否是我失去的简单性的真正折衷呢？ Component当我总是可以使用PureComponent以获得更好的性能时，是否需要扩展常规类？

188 javascript  reactjs  ecmascript-6 

我有以下React组件： export default class MyComponent extends React.Component { onSubmit(e) { e.preventDefault(); var title = this.title; console.log(title); } render(){ return ( ... <form className="form-horizontal"> ... <input type="text" className="form-control" ref={(c) => this.title = c} name="title" /> ... </form> ... <button type="button" onClick={this.onSubmit} className="btn">Save</button> ... ); } }; 控制台给了我undefined-任何想法这段代码有什么问题吗？

188 javascript  reactjs 

如何render在React组件的方法内部使用注释？ 我有以下组成部分： 'use strict'; var React = require('react'), Button = require('./button'), UnorderedList = require('./unordered-list'); class Dropdown extends React.Component{ constructor(props) { super(props); } handleClick() { alert('I am click here'); } render() { return ( <div className="dropdown"> // whenClicked is a property not an event, per se. <Button whenClicked={this.handleClick} className="btn-default" title={this.props.title} subTitleClassName="caret"></Button> …

188 reactjs  react-native 

我正在尝试在移动设备上测试我的React应用程序。我正在使用ngrok使本地服务器可用于其他设备，并且已将其与各种其他应用程序一起使用。但是，当我尝试将ngrok连接到React开发服务器时，出现错误： Invalid Host Header 我相信React默认会阻止来自其他来源的所有请求。有什么想法吗？

188 reactjs  localhost  ngrok