Durumu değiştirmek için radyo düğmesi seçimi

Question

input type="radio"'u nasıl ayarlayabilirim, böylece kullanıcının seçtiği değere bağlı olarak bir durum değeri değişecek?

Bu durumda, name="1" düğmesinin varsayılan seçili düğme olmasını istiyorum, ancak kullanıcı tarafından name="2" düğmesi seçiliyse, bazı durum değerleri değişmelidir.

<div data-toggle="buttons"> 
    <label> 
    <input type="radio" name="1" defaultChecked onChange={this.handleRadioButton}>Option 1</input> 
    </label> 
    <label> 
    <input type="radio" name="2" onChange={this.handleRadioButton}>Option 2</input> 
    </label> 
</div> 

Answer 1

Sizin handleRadioButton ihtiyaçları düğme tıklandığı haberdar olmak. Basit bir işlev parametresi öneririm. yani

onChange={() => this.handleRadioButton(1)}

onChange={() => this.handleRadioButton(2)}

İşleviniz şöyle olabilir:

handleRadioButton(value) { 
    this.setState({ 
    value: value 
    }); 
} 

Son olarak, kontrol devlet devlet değerinden okunmalıdır. defaultChecked rahatsız etmeyin

• : yani

  checked={this.state.value === 1}

  Yani ... beraber

  <input type="radio" checked={this.state.value === 1} onChange={() => this.handleRadioButton(1)} />

  <input type="radio" checked={this.state.value === 2} onChange={() => this.handleRadioButton(2)} />

  Birkaç şey daha tüm koyarak özelliği. İlk durumunuzda value: 1'u ayarlamanız yeterlidir.

• name ve value gibi HTML niteliklerine gerek yoktur. React'ta, HTML mantığı JavaScript mantığı tarafından yerine getirilir. (Uyarı: JS olmayan bir sunucu tarafından oluşturulan bir sunucu sağladığınız sürece.)