Wie verwende ich Radio-Buttons in React?

Ich mache ein Formular, und ich brauchte einen Radio-Eingang. Wie bekomme ich die überprüfte Radioeingabe in eine onSubmit-Funktion, wie ist das richtig?Wie verwende ich Radio-Buttons in React?

Dies ist mein Code, ich myRadioInput-Variable entweder Option A oder Option B enthalten, wenn ich einreichen:

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

Quelle

2015-04-17 andersem

mögliche Duplikate von [Wie Radio-Schaltflächen in ReactJS zu verwenden?] (Http://stackoverflow.com/questions/27784212/how-to-use-radio-buttons-in-reactjs) – hopper

Sie sollen ihren Wert Refs verwenden, um den Zugriff auf DOM-Knoten zu erhalten und zu untersuchen. Stattdessen sollten Sie den Eingabewert mit einer Eigenschaft des Komponentenstatus verknüpfen.

Hier sind einige Beispiele dafür, wie es zu tun: https://facebook.github.io/react/docs/two-way-binding-helpers.html

Quelle

2015-04-17 08:32:50

Danke, aber ich stimme nicht zu, dass man bei der Entwicklung von einfachen Formularen, die keine Echtzeit-Validierung benötigen, den Status unbedingt aktualisieren sollte. Alles in einem Submit-Handler zu haben, macht die Komponente viel einfacher, und ich muss mir keine Gedanken über Mixins oder Zustände machen. – andersem

Und ich stimme dem nicht zu, aber das ist ok. –

@andersem Wenn Sie den Status verwenden, wäre dies trivial. Und die Motivation, es zu verwenden, auch wenn es nicht wirklich benötigt wird, ist, dass es es leicht macht, es an veränderte Anforderungen anzupassen. – FakeRainBrigand

Wenn Sie sicherstellen, dass Ihr alle Formularelemente name Attribute haben, können Sie Daten aus dem Formular extrahiert onSubmit mit form.elements:

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

In moderne Browser, form.elements.myRadioInput sollte eine RadioNodeList sein, die eine .value entsprechend dem ausgewählten Wert hat, aber wenn das nicht unterstützt wird, erhalten Sie eine NodeList oder HTMLCollection von n oden, die durchlaufen werden müssen, um den ausgewählten Wert zu finden.

Ich habe auch eine wiederverwendbare Komponente React - <AutoForm> - die von form.elements für Sie eine generische Implementierung von Datenextraktion verwendet. Ich habe es in dem Schnipsel unten verwendet:

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

Quelle

2015-04-17 09:28:03

Die Eigenschaft e.target.elelments.myRaidoButton.value des onSubmit-Ereignisses war genau das, was ich brauchte. +1, um nicht mehrere Ereignisbehandlungsroutinen einrichten zu müssen und den Status des Optionsfelds manuell zu verfolgen. – Jeremy

Vereinbarte mit @ Jeremy. Diese Antwort ist diejenige, die ich brauchte.Ich bin froh zu wissen, dass die 'valueLink' Lösung da ist, es ist interessant, aber das scheint mir eher Standard zu sein. – nackjicholson

Ich verwende diese Lösung für Optionsfeld Zweiweg-Bindung mit aktivem:

innen Render() Methode:

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

Quelle

2018-03-07 07:23:00

Wie verwende ich Radio-Buttons in React?

Antwort

Verwandte Themen