Radyo düğmesi seçimi ile değiştirme işlevi değiştirme

Question

Durum değerini kaydetmek için radyo düğmelerini kullanarak iki düğmeli bir geçiş kullanmak isterim (bu, gönder düğmesine basıldıktan sonra kullanıcının alacağı rotayı işlemek için kullanacağım). Yukarıdaki gibi Koşu

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 fonksiyon çağrılır geçmez.

ben onChange anonim işlevini değiştirirseniz: onChange={setTimeout(() => this.handleRadioButton('one'), 0)} sonra sadece hızla ileri geri one den two sonsuza kadar değişir.

Answer 1

Bootstrap kullandığımı söylemedim çünkü ilgili olduğunu düşünmedim ... ama görünüşe göre. Radyo düğmeleri de dahil olmak üzere belirli giriş türlerine gelince Tepki ve Önyükleme arasında bir çakışma var.

react-bootstrap'a geçti ve şimdi çok iyi görüntüleniyor - sadece bazı stilleri düzeltmeniz gerekiyor.