Tag: reactjs

使用React JS下拉的OnChange事件

var MySelect = React.createClass({ change: function(){ return document.querySelector('#lang').value; }, render: function(){ return( <div> <select id="lang"> <option value="select" onChange={this.change}>Select</option> <option value="Java" onChange={this.change}>Java</option> <option value="C++" onChange={this.change}>C++</option> </select> <p></p> <p value={this.change}></p> </div> ); } }); React.render(<MySelect />, document.body); onChange事件不起作用。

反应checkbox不发送onChange

TLDR：使用defaultChecked而不是检查，在这里工作jsbin http://jsbin.com/mecimayawe/1/1/edit?js,output 尝试设置一个简单的checkbox，当它被选中时，它会将其标签文本划掉。 出于某种原因，当我使用组件时，handleChange没有被激发。 任何人都可以解释我做错了什么？ var CrossoutCheckbox = React.createClass({ getInitialState: function () { return { complete: (!!this.props.complete) || false }; }, handleChange: function(){ console.log('handleChange', this.refs.complete.checked); // Never gets logged this.setState({ complete: this.refs.complete.checked }); }, render: function(){ var labelStyle={ 'text-decoration': this.state.complete?'line-through':'' }; return ( <span> <label style={labelStyle}> <input type="checkbox" checked={this.state.complete} ref="complete" onChange={this.handleChange} /> {this.props.text} </label> </span> […]

使用React Inline样式设置backgroundImage

我试图访问一个静态图像内使用React内联backgroundImage属性。 不幸的是，我已经干了如何做到这一点。 一般来说，我以为你只是做了如下： import Background from '..http://img.dovov.combackground_image.png'; var sectionStyle = { width: "100%", height: "400px", backgroundImage: "url(" + { Background } + ")" }; class Section extends Component { render() { return ( <section style={ sectionStyle }> </section> ); } } 这适用于<img>标签。 有人可以解释两者之间的区别吗？ 例： <img src={ Background } />工作得很好。 谢谢！

如何在反应渲染函数中创builddynamichref？

我正在渲染一个职位列表。 对于每一篇文章，我想呈现一个锚标签与后ID作为HREFstring的一部分。 render: function(){ return ( <ul> { this.props.posts.map(function(post){ return <li key={post.id}><a href='/posts/'{post.id}>{post.title}</a></li> }) } </ul> ); 我该怎么做，以便每个职位href的/posts/1 ， /posts/2等？

分配左侧的Javascript对象括号表示法（{导航} =）

我以前没有看过这个语法，所以想知道这是什么意思。 左边的方括号出现语法错误：“unexpected token {” var { Navigation } = require('react-router'); 我不确定webpackconfiguration的哪个部分正在转换，或者语法的目的是什么。 这是和谐的事情吗？ 有人可以启发我吗？

React路由器授权

在元件安装之前进行授权检查的最佳做法是什么？ 我使用react-router 1.x 这是我的路线 React.render(( <Router history={History.createHistory()}> <Route path="/" component={Dashboard}></Route> <Route path="/login" component={LoginForm}></Route> </Router> ), document.body); 这是我的仪表板组件： var Dashboard = React.createClass({ componentWillMount: function () { // I want to check authorization here // If the user is not authorized they should be redirected to the login page. // What is the right way to perform […]

React Form中更新道具状态的变化

我在使用React表单时遇到问题，并正确pipe理状态。 我有一个窗体中的时间input字段（模态）。 初始值在getInitialState设置为状态variables，并从父组件传入。 这本身工作正常。 当我想通过父组件更新默认的start_time值时，问题就出现了。 更新本身通过setState start_time: new_time在父组件中发生。 然而，在我的表单中，默认的start_time值永远不会改变，因为它只在getInitialState定义一次。 我已经尝试使用componentWillUpdate通过setState start_time: next_props.start_time来强制更改状态，但实际上却发生了Uncaught RangeError: Maximum call stack size exceeded错误。 所以我的问题是，在这种情况下更新状态的正确方法是什么？ 我以某种方式想着这个错误吗？ 当前代码： @ModalBody = React.createClass getInitialState: -> start_time: @props.start_time.format("HH:mm") #works but takes long and causes: #"Uncaught RangeError: Maximum call stack size exceeded" componentWillUpdate: (next_props, next_state) -> @setState(start_time: next_props.start_time.format("HH:mm")) fieldChanged: (fieldName, event) -> stateUpdate = {} stateUpdate[fieldName] […]

React.js – 如何将属性对象传递给子组件？

我有一个名为tileGroup的组件，它具有属性是其他属性的集合（数组）。 父组件（ tileGroup ）通过使用集合中的每组属性来创build一个新的组件来呈现子组件的列表。 现在我单独将每个属性从集合映射到子组件，但是如果组件的属性数量增加，这将变得很麻烦，我确信有一个更清洁，更简单的方法来做到这一点… 如何将整套属性传递给子组件而不重映射每个属性？ 示例代码： tileGroupData = {someProperty: 'something', someOtherProperty:'something', tiles: [{vsize:1, hsize:2, etc…}, {vsize:2,hsize:3,title:'whatever'}]}; 然后创build组件 var tileGroup = React.createClass({ render: function() { var thechildren = this.props.tiles.map(function(tile) { //this is what I DON'T want to be doing. return <tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>; //what I DO want to […]

响应在React路由器中的路由转换来触发Redux操作

我在我最新的应用程序中使用react-router和redux，我正在面对一些与根据当前的url参数和查询所需的状态更改相关的问题。 基本上我有一个组件需要更新它的状态，每次URL的变化。 国家正在通过像装饰这样的装饰者通过道具传入 @connect(state => ({ campaigngroups: state.jobresults.campaigngroups, error: state.jobresults.error, loading: state.jobresults.loading })) 目前，我正在使用componentWillReceiveProps生命周期方法来响应来自react-router的url更改，因为react-router会在URL中的this.props.params和this.props.query发生更改时将新的props传递给处理程序。这个方法的主要问题是我在这个方法中触发一个动作来更新状态 – 然后传递新的道具组件，这将再次触发相同的生命周期方法 – 所以基本上创build一个无限循环，目前我正在设置一个状态variables来阻止这种情况的发生。 componentWillReceiveProps(nextProps) { if (this.state.shouldupdate) { let { slug } = nextProps.params; let { citizenships, discipline, workright, location } = nextProps.query; const params = { slug, discipline, workright, location }; let filters = this._getFilters(params); // set the state […]

如何在Reduce中创buildAJAX请求

就我所知，我必须在行动中编写请求创build。 如何使用承诺提交请求？ 我正在获取数据。 然后在减速器中创build新的状态。 绑定动作和减速器连接。 但我不知道如何使用诺言的要求。 行动 import $ from 'jquery'; export const GET_BOOK = 'GET_BOOK'; export default function getBook() { return { type: GET_BOOK, data: $.ajax({ method: "GET", url: "/api/data", dataType: "json" }).success(function(data){ return data; }) }; } 减速器 import {GET_BOOK} from '../actions/books'; const booksReducer = (state = initialState, action) => { switch (action.type) […]