在我的渲染return()中,我有以下内容:
<button onClick={ this.selectTimeframe('Today') }
className={ this.setActiveIf('Today') } type="button">Today</button>
这是什么功能:
selectTimeframe(timeframe) {
// this.setState({ timeframe });
}
^我现在必须将setState注释掉,否则我会收到上面发布的错误并且应用程序会中断。
我在构造函数中有这个:
this.selectTimeframe = this.selectTimeframe.bind(this);
我发现了这个answer here,但它没有意义,我想如何传入变量?或者他是说每个独特的按钮都需要一个独特的功能?为了避免在渲染中调用它?
import React from 'react';
export class TimeframeFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
timeframe: 'Today'
};
this.selectTimeframe = this.selectTimeframe.bind(this);
this.setActiveIf = this.setActiveIf.bind(this);
}
componentDidMount() {
console.log('%c TimeframeFilter componentDidMount', 'background: #393939; color: #bada55', this.state);
}
selectTimeframe(timeframe) {
// this.setState({ timeframe });
}
setActiveIf(timeframe) {
return this.state.timeframe === timeframe ? 'btn btn-default active' : 'btn btn-default';
}
render() {
return (
<div className="fl">
<span className="label label-default mr10">Timeframe</span>
<div className="btn-group btn-group-sm mr20" role="group">
<button onClick={ this.selectTimeframe('Today') }
className={ this.setActiveIf('Today') } type="button">Today</button>
<button onClick={ this.selectTimeframe('Week') }
className={ this.setActiveIf('Week') } type="button">Week</button>
<button onClick={ this.selectTimeframe('Month') }
className={ this.setActiveIf('Month') } type="button">Month</button>
<button onClick={ this.selectTimeframe('Year') }
className={ this.setActiveIf('Year') } type="button">Year</button>
<button onClick={ this.selectTimeframe('All') }
className={ this.setActiveIf('All') } type="button">All</button>
</div>
</div>
);
}
}
export default TimeframeFilter;
答案 0 :(得分:3)
您应该使用onClick
将值传递给arrow function or bind method
函数,否则它只会执行以在每次重新渲染时将值返回到onClick
,如果您在其中使用setState
,它会调用rerender
和函数再次调用,从而重复该过程。
喜欢
<button onClick={ ()=> this.selectTimeframe('Today') }
className={ this.setActiveIf('Today') } type="button">Today</button>
或
<button onClick={ this.selectTimeframe.bind(this, 'Today') }
className={ this.setActiveIf('Today') } type="button">Today</button>
希望我能够清楚地向你解释。 :)
编辑:虽然上述方法解决了问题但由于性能原因不是最佳方法。我们应该避免在render内部绑定方法,因为在重新渲染期间它会创建新方法而不是使用旧方法,这会影响性能。
上查看此答案答案 1 :(得分:1)
目前,您在渲染方法中调用了this.selectTimeframe('Today')
。
你可能想要
onClick={() => this.selectTimeframe('Today') }
或者更聪明的方式
<button onClick={ this.selectTimeframe.bind(this, 'Today') } className={ this.setActiveIf('Today') } type="button">Today</button>
selectTimeframe.bind(key) {
switch(key){
case 'Today':
//your logic
break;
}
}