我想使用单选按钮来使用双按钮切换来注册状态值(我将使用它来处理用户在点击提交按钮后将采取的路线)。
var Pathfinder = React.createClass({
getInitialState: function() {
return {query: '', pathname: '', route: 'one'};
},
handleRadioButton: function(type) {
console.log('type: ', type);
this.setState({route: type});
},
handleTextField: function(event) {
if (this.state.route === 'one') {
this.setState({pathname: '/pathone/'});
} else {
this.setState({pathname: '/pathtwo/'});
}
},
render: function() {
return (
<div>
<div>
<div>
<input autoFocus type="search" onChange={this.handleTextField} />
<div>
<Link to={this.state.pathname}>
<button type="submit"><i className="glyphicon glyphicon-search"></i></button>
</Link>
</div>
<div data-toggle="buttons">
<label>
<input type="radio" checked={this.state.route === 'one'} onChange={() => this.handleRadioButton('one')} />1
</label>
<label>
<input type="radio" checked={this.state.route === 'two'} onChange={() => this.handleRadioButton('two')} />2
</label>
</div>
</div>
</div>
</div>
);
}
});
如上运行,该onChange
函数永远不会被调用。
如果我将onChange
匿名函数更改为:
onChange={setTimeout( () => this.handleRadioButton('one'), 0)}
那么它只是快速地从one
到two
无限地来回变化。