ラジオボタンの選択でonChange関数を呼び出す

Question

ラジオボタンを使用してステート値を登録する2つのボタントグルを使用したいと思います（送信ボタンを押した後にユーザーが実行するルートを処理するために使用します）。

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無限に前後に変更されます。

Answer 1

私はブートストラップを使用しているとは言及していませんでした。なぜなら、それは関係がないと思ったからです...しかし、明らかにそうでした。ラジオボタンを含む特定の入力タイプについては、ReactとBootstrapの間に矛盾があります。

react-bootstrapに変更されました。レンダリングがうまくいきました。スタイリングの一部を修正する必要があります。