Come utilizzare i pulsanti di opzione in React?

Question

Sto creando un modulo e avevo bisogno di un ingresso radio. Come posso ottenere l'ingresso radio controllato in una funzione onSubmit, qual è il modo corretto?

Questo è il mio codice, ho myRadioInput-variabile per contenere o Opzione A o Opzione B quando presento:

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

Si consiglia di non utilizzare arbitri per ottenere l'accesso ai nodi DOM e controllare il loro valore. Invece dovresti collegare il valore degli input a una proprietà sullo stato del componente.

Ecco alcuni esempi di come farlo: https://facebook.github.io/react/docs/two-way-binding-helpers.html

Answer 2

Se assicurarsi tutti gli elementi del modulo hanno name attributi, è possibile estrarre i dati dal modulo di onSubmit utilizzando form.elements:

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

In browser moderni, form.elements.myRadioInput dovrebbe essere un RadioNodeList che ha un .value corrispondente al valore selezionato, ma quando non è supportato si otterrà un NodeList o HTMLCollection di n odes che devono essere ripetuti per trovare il valore selezionato.

---

Ho anche un riutilizzabile Reagire componente - <AutoForm> - che utilizza un'implementazione generica di estrazione dei dati da form.elements per voi. Ho usato nel frammento di seguito:

<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

io uso questa soluzione per pulsante radio bidirezionale vincolante con attivo:

all'interno render() metodo:

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