web-dev-qa-db-fra.com

Comment utiliser les boutons radio dans React?

Je fais un formulaire et j'avais besoin d'une entrée radio. Comment obtenir l'entrée radio vérifiée dans une fonction onSubmit, quelle est la bonne manière?

Ceci est mon code, je myRadioInput-variable pour contenir l'option A ou l'option B lorsque je soumets:

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>
        )
    }
});
javascriptradio-buttonreactjs
10
andersem

Vous ne devez pas utiliser les références pour accéder aux noeuds DOM et inspecter leur valeur. Au lieu de cela, vous devez lier la valeur des entrées à une propriété dans l'état du composant. 

Voici quelques exemples de la manière de procéder: https://facebook.github.io/react/docs/two-way-binding-helpers.html

6
Anders Ekdahl

Si vous vous assurez que tous vos éléments de formulaire ont des attributs name, vous pouvez extraire des données du formulaire onSubmit à l'aide de form.elements:

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

Dans les navigateurs modernes, form.elements.myRadioInput devrait être un RadioNodeList qui a un .value correspondant à la valeur sélectionnée, mais lorsque cela n'est pas pris en charge, vous obtiendrez un NodeList ou HTMLCollection de nœuds qui doivent être itérés pour rechercher la valeur sélectionnée.

J'ai également un composant React réutilisable - <AutoForm> - qui utilise une implémentation générique d'extraction de données à partir de form.elements pour vous. Je l'ai utilisé dans l'extrait ci-dessous:

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

11
Jonny Buchanan

j'utilise cette solution pour la liaison bidirectionnelle par bouton radio avec active:

méthode render intérieure ():

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>
))
1
Mohmmad Ebrahimi Aval
        { items.map(item => 
        <span id="qn" key={item.qno}>{item.qno}</span>
        )}

        { items.map(item => 
        <span id="qd" key={item.qno}>{item.question}<br/>
        <br/>
      <input onClick={this.captureClick} type="radio" value="1" checked={this.state.option === "1"}
            onChange={this.handleChange}/>
        { item.options.map(option => 
        <span id="op" key={option.option1}>
        {option.option1}</span>
        )}<br/>
       <br/> <input onClick={this.captureClick} type="radio" value="2" checked={this.state.option === "2"}
            onChange={this.handleChange} />
        { item.options.map(option => 
        <span id="op" key={option.option2}>
        {option.option2}</span>
        )}<br/><br/>
        <input onClick={this.captureClick} type="radio" value="3" checked={this.state.option === "3"}
            onChange={this.handleChange} />
        { item.options.map(option => 
        <span id="op" key={option.option3}>
        {option.option3}</span>
        )}<br/><br/>

        <input onClick={this.captureClick} type="radio" value="4" checked={this.state.option === "4"}
            onChange={this.handleChange} />

        { item.options.map(option => 
        <span id="op" key={option.option4}>{option.option4}</span>
        )}<br/><br/>
      <button type="submit" className="save" onClick={this.onSave}>SAVE</button>  

        </span>

Vous pouvez aussi utiliser ce bouton radio comme ceci

0
Jayakar Pj