我试图从我的渲染视图重构以下代码:
<Button href="#" active={!this.state.singleJourney} onClick={this.handleButtonChange.bind(this,false)} >Retour</Button>
到绑定在构造函数中的版本.原因是渲染视图中的绑定会给我带来性能问题,特别是在低端手机上.
我创建了以下代码,但我不断收到以下错误(很多错误).看起来应用程序进入循环:
Warning: setState(...): Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`.
以下是我使用的代码:
var React = require('react');
var ButtonGroup = require('react-bootstrap/lib/ButtonGroup');
var Button = require('react-bootstrap/lib/Button');
var Form = require('react-bootstrap/lib/Form');
var FormGroup = require('react-bootstrap/lib/FormGroup');
var Well = require('react-bootstrap/lib/Well');
export default class Search extends React.Component {
constructor() …我正在使用react bootstrap,这个框架提供了一些不错的FormControls.
但是我想使FormControls中生成的Input字段具有readonly ="readonly"的prop.这样,此字段看起来与我的其他FormControls相同,但不在IOS上提供键盘输入.
在我的情况下,输入将由日历选择器提供,该日历选择器将由弹出窗口触发.
有谁知道如何给FormControl参数readonly ="readonly",以便浏览器中生成的输入字段将具有read readlyly ="readonly"？
很多thnx的答案!
我试图将我的React类转换为ES6,但是我在这个过程中遇到了一些困难.我想在构造函数中创建绑定,而不是在渲染视图中.
现在,如果我有一个带有setState的根模块,需要一个参数,例如:
constructor() {
super();
this.state = {
mood: ""
};
this.updateMood(value) = this.updateMood.bind(this,value);
}
updateMood(value) {
this.setState({mood: value});
}
然后我将此函数传递给组件:
<customElement updateMood={this.updateMood}></customElement>
然后在customElement模块中,我有这样的事情:
constructor() {
super();
}
update(e) {
this.props.updateMood(e.target.value);
}
在渲染中:
<input onChange={this.update} />
这是正确的方法吗？因为我不能让它工作;-(
我有一组动态的元素,所以我不知道该集合的内容是什么.我想动态渲染这些复选框,默认情况下都选中它们.您应该能够取消选中框,这会在渲染中触发另一个地图功能.(所以基本上是我的过滤器)
我在国家设置上苦苦挣扎.我想到了以下内容,我希望通过API调用在ComponentWillMount期间设置initialState:
scenario 1 (arrays):
this.state {
checkboxes: [value1, value2, value3],
checkedcheckboxes: [value1, value2]
}
然后我可以使用react.addons.update函数来更改checkcheckboxes状态.缺点是在渲染我的复选框时,我必须在每个复选框上使用indexOf循环检查checkcheckboxes数组以查看是否应该检查它.
scenario 2 (object):
this.state {
checkboxes: {
value1: true,
value2: true,
value3: false
}
这样我有动态键,这使得它更难工作(我猜),因为我必须在我的setState中使用计算字段.我还认为这会对我的表现产生负面影响.
这种模式有没有最好的做法？
谢谢!
我有一个飞行状态,我有一个滑块可以更改最高价格以更改飞行元素的可见性.
maxpriceFilter() {
var flightOffer = this.state.flightOffer;
var sliderPrice = this.state.sliderPrice;
for (var i = 0; i < flightOffer.length; i++) {
if( flightOffer[i].price > sliderPrice) {
this.setState(
{[flightOffer[i].hiddenprice] : true}
);
};
}
这段代码在状态的根目录中添加了一个状态为true的未定义字段.我无法找到任何最佳实践,除此之外使用计算字段.但我不能让计算字段工作..
有人可以帮帮我吗？