Question

当我触发onClick时，即使事件持续触发约1000次以上。我似乎无法想象这是从哪里来的。我已将onClick更改为onMouseover以查看它是否继续触发，但事件仅触发一次。

我正在使用：react 0.13.3

有什么想法吗？

var React = require('react');
var AppActions = require('../../actions/app-actions.js');


var FileAmount = React.createClass({
	getInitialState: function() {
		return {
			amount : this.props.amount,
			config : this.props.config
		};
	},
	handleClick: function(e){
		var name = e.target.name;
		if(name === 'decrease'){
			if(this.state.amount > 1){
				this.setState({
					amount : (this.state.amount  - 1)
				});
				AppActions.updateAmount(this.props.index, (this.state.amount  - 1))
			}
		}else{
			this.setState({
					amount : (this.state.amount + 1)
			});
			AppActions.updateAmount(this.props.index, (this.state.amount + 1))
		}
	},
	handleChange: function(e){
		var amount = e.target.value;
		this.setState({
			amount : amount
		});
		AppActions.updateAmount(this.props.index, amount)
	},
	render: function() {

		var config = this.state.config
		
		return (
			<div className="file-amount">
				<span className="file-amount-text"> {config.filelist_quantity}: {this.state.amount} {config.filelist_pieces}</span>
				<div className="file-amount-fields">
					<i className="file-amount-decrease icon" name="decrease" onClick={this.handleClick} /> 
						<input className="file-amount-input" type="number" value={this.state.amount} onChange={this.handleChange} />
					<i className="file-amount-increase icon" name="increase" onClick={this.handleClick} /> 
				</div>
			</div>
		);
	}
});

module.exports = FileAmount;

Answer 1

我在原帖上留了评论，但在第二次检查时，你很可能从Flux商店传下来了props.amount。如果是这种情况，您将创建一个无限循环。

handleClick递增state.amount，然后在调用AppAction后，商店会使用props.amount更新组件，然后onChange会触发，因为它与{{1}相关联然后state.amount更改onChange并在调用state.amount时更改props.amount。

每次更新AppActions.updateAmount或props时，React都会调用state方法。如果在render()执行时有props或state更新的任何方式，那么您可能会遇到无限循环。

Answer 2

也许添加e.preventDefault（）;你的handleClick方法将停止启动这个循环。

Answer 3

I removed the added javascript for the browser-sync proxy settings. That somehow screwed around with my react.

React onClick保持触发

3 个答案: