Jak korzystać z przycisków radiowych w React?

Question

Tworzę formularz, a ja potrzebowałem wejścia radiowego. Jak uzyskać sprawdzone wejście radiowe w funkcji onSubmit, jaki jest prawidłowy sposób?

To jest mój kod, ja myRadioInput-zmiennej zawierać Każda z tych opcji A lub B Option kiedy złożyć:

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

Nie należy stosować bibl aby uzyskać dostęp do węzłów DOM i skontrolować ich wartość. Zamiast tego należy połączyć wartość wejściową z właściwością w stanie składnika.

Oto kilka przykładów, jak to zrobić: https://facebook.github.io/react/docs/two-way-binding-helpers.html

Answer 2

Jeśli sprawdzić, czy wszystkie elementy formularza mieć name atrybutów można wyodrębnić dane z formularza onSubmit użyciu form.elements:

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

W nowoczesne przeglądarki, form.elements.myRadioInput, powinny być RadioNodeList, które mają wartość .value odpowiadającą wybranej wartości, ale gdy to nie jest obsługiwane, otrzymasz NodeList lub n z z ody, które muszą być powtórzone, aby znaleźć wybraną wartość.

---

Mam też wielokrotnego użytku React Component - <AutoForm> - która wykorzystuje rodzajowe wdrażania ekstrakcji danych z form.elements dla Ciebie. Używałem go w poniższym fragmencie:

<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

Używam tego rozwiązania przycisk krótkofalówka wiązania z aktywnym:

wewnątrz render() metoda:

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> 
))