Как использовать переключатель в React.js на примере

В этом руководстве мы покажем вам, как использовать переключатели в React.js, и приведем пример. Мы рассмотрим все необходимые шаги, от создания простого переключателя до обработки события изменения. Мы также покажем вам, как использовать переключатели для сбора пользовательского ввода.

В этом примере мы возьмем простой «пол» с переключателем «мужской» и «женский» и добавим событие onchange с помощью handleChange(), после чего присвоим значение массиву переменных состояния. Затем в событии отправки мы возьмем эти значения с переменной состояния.

Пример кода:

import React, { Component } from 'react';
import { render } from 'react-dom';
      
class App extends Component {
  constructor() {
    super();
    this.state = {
      gender: ''
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }
    
  handleChange(event) {
    this.setState({gender: event.target.value});
  }
    
  handleSubmit(event) {
    console.log(this.state);
    event.preventDefault();
  }
    
  render() {
    return (
      <div>
        <h1>React Radio Buttons onChange Example</h1>
        <form onSubmit={this.handleSubmit}>
          
          <strong>Select Gender:</strong>
          <label> 
            <input
              type="radio"
              value="male"
              onChange={this.handleChange}
            />Male
          </label>
          <label> 
            <input
              type="radio"
              value="female"
              onChange={this.handleChange}
            />Female
          </label>
          
          <input type="submit" value="Submit" />
        </form>
      </div>
    );
  }
}
  
render(<App />, document.getElementById('root'));

Выход:

Удачного кодирования!!!

1.15 GEEK