React içinde radyo düğmelerini nasıl kullanırım?

Question

Bir form yapıyorum ve bir radyo girişine ihtiyacım vardı. Kontrol edilen radyo girişini onSubmit işlevinde nasıl alırım, doğru yol nedir? Sen DOM düğümlerinin erişmek ve kendi değerini incelemek için ref kullanmamalısınız

React.createClass({ 
    handleSubmit: function() { 
     e.preventDefault(); 
     var myTextInput = this.refs.myTextInput.getDOMNode().value.trim(); 
     var myRadioInput = "How ?"; 
    }, 
    render: function() { 
     return (
      <form onSubmit={this.handleSubmit}> 
       <input type="text" ref="myTextInput" /> 
       <label> 
        <span>Option A</span> 
        <input type="radio" name="myRadioInput" value="Option A"/> 
       </label> 
       <label> 
        <span>Option B</span> 
        <input type="radio" name="myRadioInput" value="Option B"/> 
       </label> 
       <input type="submit" value="Submit this"/> 
      </form> 
     ) 
    } 
}); 

Answer 1

: Ben gönderdiğinizde

Bu

benim kodudur, ben Seçenek A veya Seçenek B ya içermesi-değişken myRadioInput. Bunun yerine, girdi değerini bileşen durumu üzerindeki bir özelliğe bağlamanız gerekir. İşte

bunu nasıl bazı örnekler şunlardır: https://facebook.github.io/react/docs/two-way-binding-helpers.html tüm form elemanları, sen form.elements kullanarak forma onSubmit veri ayıklamak yapabilirsiniz name özelliklerine sahip olduğunuzdan emin olursa

Answer 2

:

handleSubmit: function(e) { 
    e.preventDefault() 
    var form = e.target 
    var myTextInput = form.elements.myTextInput.value 
    var myRadioInput = form.elements.myRadioInput.value 
    // ... 
} 

yılında Modern tarayıcılar, form.elements.myRadioInput, .value seçilen değere karşılık gelen bir RadioNodeList olmalıdır, ancak desteklenmediğinde, bir NodeList veya HTMLCollection n olsun Seçilen değeri bulmak için üzerinde yinelenen odes. <AutoForm> - - sizin için form.elements veri çıkarılması genel bir uygulamaya sahiptir Ben de bir yeniden kullanılabilir olması

---

bileşeni yanıt verin.

<meta charset="UTF-8"> 
 
<script src="http://fb.me/react-0.13.1.js"></script> 
 
<script src="http://fb.me/JSXTransformer-0.13.1.js"></script> 
 
<script src="https://cdn.rawgit.com/insin/react-auto-form/master/dist/react-auto-form.js"></script> 
 
<div id="app"></div> 
 
<script type="text/jsx;harmony=true">void function() { "use strict"; 
 
    
 
var Example = React.createClass({ 
 
    getInitialState() { 
 
     return {submittedData: null} 
 
    }, 
 

 
    handleSubmit(e, submittedData) { 
 
     e.preventDefault() 
 
     this.setState({submittedData}) 
 
    }, 
 

 
    render() { 
 
     return <div> 
 
      <AutoForm onSubmit={this.handleSubmit}> 
 
       <input type="text" name="myTextInput" /> 
 
       <label> 
 
        <span>Option A</span> 
 
        <input type="radio" name="myRadioInput" value="Option A"/> 
 
       </label> 
 
       <label> 
 
        <span>Option B</span> 
 
        <input type="radio" name="myRadioInput" value="Option B"/> 
 
       </label> 
 
       <input type="submit" value="Submit this"/> 
 
      </AutoForm> 
 
      {this.state.submittedData && <pre> 
 
       {JSON.stringify(this.state.submittedData, null, 2)} 
 
      </pre>} 
 
     </div> 
 
    } 
 
}); 
 
    
 
React.render(<Example/>, document.getElementById('app')) 
 
    
 
}()</script>

Answer 3

i aktif olan bağlanma radyo düğmesi iki yol bu çözümü kullanın::

const items = [ 
    {label: 'one', checked: false}, 
    {label: 'two', checked: true}, 
    {label: 'three', checked: true} 
]; 

items.map((item, index) => (
    <div className={`radioItem (item.checked) ? 'active' : ''`}> 
     <label> 
      {item.label} 
      <input type="radio" 
        name="address" 
        value={item.label} 
        onClick={(e)=>{ 
         $('.radioItem').filter('.active').removeClass('active'); 
         $(e.currentTarget).closest('.radioItem').addClass('active'); 
        }} 
        ref={elm => $(elm).prop('checked', item.checked)} 
      /> 
     </label> 
    </div> 
)) 

:

iç yöntemi) (işlemek aşağıda snippet'te kullandım