Comment utiliser les boutons radio dans React?

je fais un formulaire, et j'avais besoin d'une entrée radio. Comment puis-je obtenir l'entrée radio contrôlée dans une fonction onSubmit, Quelle est la bonne façon?

C'est mon code, I myRadioInput-variable pour contenir l'Option A ou L'Option B Quand 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>
        )
    }
});
9
demandé sur andersem 2015-04-17 11:29:34

4 réponses

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

voici quelques exemples de la façon de le faire: https://facebook.github.io/react/docs/two-way-binding-helpers.html

6
répondu Anders Ekdahl 2015-04-17 08:32:50

si vous vous assurez que tous les éléments de votre formulaire ont les attributs name , vous pouvez extraire des données du formulaire onSubmit en utilisant 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 quand ce n'est pas pris en charge, vous obtiendrez un NodeList ou HTMLCollection de noeuds qui doivent être itérés pour trouver la valeur sélectionnée.

- <AutoForm> - qui utilise une implémentation Générique d'extraction de données 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>
10
répondu Jonny Buchanan 2015-04-17 09:28:03

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

méthode inside render (): 

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
répondu Mohmmad Ebrahimi Aval 2018-03-07 07:23:00 
        { 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 utiliser le bouton de Radio comme ceci aussi

0
répondu Jayakar Pj 2018-08-06 10:31:54