Как использовать переключатели в React?

Question

Я делаю форму, и мне нужен был радиовход. Как получить проверенный радиовход в функции onSubmit, как правильно?

Это мой код, я myRadioInput-переменная, чтобы содержать либо вариант A или вариант B, когда я отправляю:

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

Вы не должны использовать ссылки для получения доступа к узлам DOM и проверки их стоимости. Вместо этого вы должны связать входные значения со свойством состояния компонента.

Вот несколько примеров того, как это сделать: https://facebook.github.io/react/docs/two-way-binding-helpers.html

Answer 2

Если вы убедитесь, что все элементы формы имеют name атрибуты, вы можете извлечь данные из формы onSubmit с помощью form.elements:

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

В современных браузерах form.elements.myRadioInput должен быть RadioNodeList который имеет .value соответствует выбранному значению, но когда это не поддерживается, вы получите NodeList или же HTMLCollection узлов, которые должны быть повторены, чтобы найти выбранное значение.

---

У меня также есть повторно используемый компонент React - <AutoForm> - который использует общую реализацию извлечения данных из form.elements для тебя. Я использовал это во фрагменте ниже:

<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

Я использую это решение для двухсторонней привязки переключателя с активным:

внутри метода 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>
))

Answer 4

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

Вы можете использовать радио-кнопки, как это также