Tag: reactjs

反应：键盘事件处理程序所有'空'

我无法让任何React SyntheticKeyboardEvent处理程序为事件属性注册除null之外的任何内容。 我已经在小提琴中孤立了组件，并得到了与我的应用程序相同的结果。 任何人都可以看到我做错了什么？ http://jsfiddle.net/kb3gN/1405/ var Hello = React.createClass({ render: function() { return ( <div> <p contentEditable="true" onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress}>Foobar</p> <textarea onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress}> </textarea> <div> <input type="text" name="foo" onKeyDown={this.handleKeyDown} onKeyUp={this.handleKeyUp} onKeyPress={this.handleKeyPress} /> </div> </div> ); }, handleKeyDown: function(e) { console.log(e); }, handleKeyUp: function(e) { console.log(e); }, handleKeyPress: function(e) { console.log(e); } }); React.renderComponent(<Hello />, […]

使用babel后，IE中的'Symbol'是未定义的

我有一个使用ES6标准写的reactjs应用程序，我使用webpack来构build它。 webpack使用babel-loader js模块。 具体来说，我使用以下版本的软件包： ├── babel@5.8.34 ├── babel-core@5.8.34 ├── babel-loader@5.4.0 └── webpack@1.12.6 但是，build立后，IE 10给出了以下错误'Symbol' is undefined 。 不应该把babel定义为Symbol吗？ 是否有任何具体的configurationwebpack或babel我需要设置为了使其工作？ 我在我的.babelrc使用{stage: 0}configuration。 任何帮助将不胜感激，谢谢！

如何渲染重复元素？

我已经写了一些代码来渲染ReactJS中的重复元素，但我讨厌它是多么的丑陋。 render: function(){ var titles = this.props.titles.map(function(title) { return <th>{title}</th>; }); var rows = this.props.rows.map(function(row) { var cells = []; for (var i in row) { cells.push(<td>{row[i]}</td>); } return <tr>{cells}</tr>; }); return ( <table className="MyClassName"> <thead> <tr>{titles}</tr> </thead> <tbody>{rows}</tbody> </table> ); } 有没有更好的方法来实现这一目标？ （我想在模板代码中embedded循环，或者类似的方法）。

通过使用ES6语法的onclick事件来响应传递参数

如何使用ES6语法将附加parameter passing给onClick事件？ 例如： handleRemove = (e) => { } render() { <button onClick={this.handleRemove}></button> } 我想传递一个id给handleRemove函数，像这样： <button onClick={this.handleRemove(id)}></button>

在成功asynchronous还原操作时转换到另一个path

我有一个非常简单的反应组件： container挂钩到redux并处理动作，存储订阅等 list显示我的项目列表 new ，这是一个新的项目添加到列表的forms 我有一些反应路由器路由如下： <Route name='products' path='products' handler={ProductsContainer}> <Route name='productNew' path='new' handler={ProductNew} /> <DefaultRoute handler={ProductsList} /> </Route> 以便显示list或form ，但不能同时显示。 我想要做的是让一个新项目成功添加后，应用程序重新路由回列表。 我到目前为止的解决scheme是在asynchronousdispatch之后有一个.then() ： dispatch(actions.addProduct(product) .then(this.transitionTo('products')) ) 这是这样做的正确的方法，或者我应该发起另一个行动，以触发路线改变？

React：我可以操纵DOM React渲染多less？

这就是我正在做的： http : //jsfiddle.net/iamnoah/pTrrw/ 关键部分是： position: function() { var container = $(this.getDOMNode()); this._menu = $(this.refs.menu.getDOMNode()); this._menu.appendTo(document.body). offset({ top: container.offset().top + container.outerHeight(), left: container.offset().left }); }, restore: function() { this._menu.appendTo(this.getDOMNode()); }, componentWillUpdate: function() { this.restore(); }, componentDidUpdate: function() { this.position(); }, componentDidMount: function() { this.position(); }, 这现在工作很好。 我假定React在更新之间独自离开DOM，并且不会错过它，所以我把内容放回到组件更新之前。 实际上，React对于移动内容似乎没有问题（如果我删除了componentWillUpdate和componentDidUpdate，定位的元素仍然会更新！） 我的问题是有多less由此产生的假设是安全的（例如，如果我假设这些东西，我的代码是否会在未来版本的React中被破解？）： React不关心DOM是否在更新之间移动，只要你把它放回componentWillUpdate。 React事件处理程序仍然可以处理已移动的元素。 React会将您要求的任何内联样式与元素上的样式合并（即使它没有设置它们）。 React将更新它所呈现的DOM，即使您将该DOM移动到文档中的其他位置也是如此！ 最后一个对我来说似乎有些极端和神奇，但是如果它持续下去的话，会有一些重大的意义。

React js中的“挂载”是什么？

在学习ReactJS的过程中，我听到“mount”这个词太多次了。 而且似乎有关于这个术语的生命周期方法和错误。 React是什么意思？ 例子： componentDidMount() and componentWillMount()

Reactjs：意外的标记“<”错误

我刚刚开始使用Reactjs，并正在编写一个简单的组件来显示 li标签，并遇到这个错误： 意外的标记“<” 我把这个例子放在http://jsbin.com/UWOquRA/1/edit?html,js,console,output下的jsbin 请让我知道我做错了什么。

如何设置默认值checkboxREACT js

在使用React中的默认值checked =“checked”后，我很难更新checkbox的状态。 var rCheck = React.createElement('input',{type: 'checkbox', checked:'checked', value: true},'Check here'); 分配checked="checked" ，我不能通过单击来取消选中/检查来交互checkbox状态。

如何正确包装less量的JSXTransformer的TD标签？

我有一个数组与项目，我想这样做： <tr> (until have items in array <td></td><td></td>) </tr> 但是，如果我这样做，我得到一个JSXTransformer错误： 相邻的XJS元素必须包裹在封闭的标签中 工作版本： {rows.map(function (rowElement){ return (<tr key={trKey++}> <td className='info' key={td1stKey++}>{rowElement.row[0].value}</td><td key={td2ndKey++}>{rowElement.row[0].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[1].value}</td><td key={td2ndKey++}>{rowElement.row[1].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[2].value}</td><td key={td2ndKey++}>{rowElement.row[2].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[3].value}</td><td key={td2ndKey++}>{rowElement.row[3].count}</td> <td className='info' key={td1stKey++}>{rowElement.row[4].value}</td><td key={td2ndKey++}>{rowElement.row[4].count}</td> ……. </tr>); })} 我试过这个 但是用<div>标签，它不能正常工作。 在这里回答： Uncaught错误：不变违规：findComponentRoot（…，… $ 110）：无法find元素。 这可能意味着DOM意外地发生了变化 <tbody> {rows.map(function (rowElement){ return (<tr key={trKey++}> {rowElement.row.map(function(ball){ console.log('trKey:'+trKey+' […]