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

вот самый простой способ реализации переключателей в react js.

class App extends React.Component {
  
  setGender(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

редактировать

вы можете использовать функцию стрелки вместо привязки. Замените приведенный выше код как

<div onChange={event => this.setGender(event)}>

для значения по умолчанию используйте defaultChecked, такой

<input type="radio" value="MALE" defaultChecked name="gender"/> Male

сделать радио компонентов как стремно компонент и передать реквизит, чтобы от родителей.

import React from "react";
const Radiocomponent = ({props})=>
    return ( 
      <div onChange={this.setGender.bind(this)}>
        <input type="radio" value="MALE" name="gender" defaultChecked={props.value ==="MALE"} /> Male
        <input type="radio" value="FEMALE" name="gender" defaultChecked={props.value ==="FEMALE"}/> Female
      </div>
     )
  );

default export Radiocomponent;

просто идея здесь: когда дело доходит до радиовходов в React, я обычно представляю их все по-другому, что было упомянуто в предыдущих ответах.

Если это может помочь любому, кто нуждается в рендеринге большого количества переключателей:

import React from "react"
import ReactDOM from "react-dom"

// This Component should obviously be a class if you want it to work ;)

const RadioInputs = (props) => {
  /*
    [[Label, associated value], ...]
  */
  
  const inputs = [["Male", "M"], ["Female", "F"], ["Other", "O"]]
  
  return (
    <div>
      {
        inputs.map(([text, value], i) => (
	  <div key={ i }>
	    <input type="radio"
              checked={ this.state.gender === value } 
	      onChange={ /* You'll need an event function here */ } 
	      value={ value } /> 
    	    { text }
          </div>
        ))
      }
    </div>
  )
}

ReactDOM.render(
  <RadioInputs />,
  document.getElementById("root")
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>

нажатие переключателя должно вызвать событие, которое либо:

1. вызывает setState, если вы хотите, чтобы знание выбора было локальным, или
2. вызывает обратный вызов, который был передан сверху self.props.selectionChanged(...)

в первом случае изменение состояния вызовет повторную визуализацию, и вы можете сделать
<td>chosen site name {this.state.chosenSiteName} </td>

во втором случае источник обратного вызова обновит вещи, чтобы гарантировать, что вниз по линии, ваш Экземпляр SearchResult будет иметь chosensitename и chosenAddress, установленные в его реквизитах.

Я также запутался в радио, реализации флажка. Что нам нужно, так это прослушать событие изменения радио, а затем установить состояние. Я привел небольшой пример выбора пола.

/*
 * A simple React component
 */
class App extends React.Component {
  constructor(params) {
     super(params) 
     // initial gender state set from props
     this.state = {
       gender: this.props.gender
     }
     this.setGender = this.setGender.bind(this)
  }
  
  setGender(e) {
    this.setState({
      gender: e.target.value
    })
  }
  
  render() {
    const {gender} = this.state
    return  <div>
        Gender:
        <div>
          <input type="radio" checked={gender == "male"} 
onClick={this.setGender} value="male" /> Male
          <input type="radio" checked={gender == "female"} 
onClick={this.setGender} value="female"  /> Female
        </div>
        { "Select Gender: " } {gender}
      </div>;
  }
}

/*
 * Render the above component into the div#app
 */
ReactDOM.render(<App gender="male" />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

на основании чего реагировать документы говорят:

Обработка Нескольких Входов. Когда вам нужно обработать несколько управляемых входных элементов, вы можете добавить атрибут name к каждому элементу и позволить функции обработчика выбрать, что делать на основе значения event.target.name.

например:

export default class extends React.Component {    
    constructor(props){
       super(props);
       this.state = {};
    }     

    handleChange = e => {
        const { name, value } = e.target;

        this.setState({
            [name]: value
        });
    };

    render() {
        return (
                <div className="radio-buttons">
                    <input id="windows"
                                 value="windows"
                                 name="platform"
                                 onChange={this.handleChange}>Windows</input>
                    <input id="mac"
                                 value="mac"
                                 name="platform"
                                 onChange={this.handleChange}>Mac</input>
                    <input id="linux"
                                 value="linux"
                                 name="platform"
                                 onChange={this.handleChange}>Linux</input>
                </div>
        );
    }
}

сначала ни один из переключателей не выбран так this.state является пустым объектом, но всякий раз, когда переключатель выбрано this.state получает новое свойство с именем ввода и его значением. Затем легко проверить, выбрал ли пользователь какой-либо переключатель, например:

const isSelected = this.state.platform ? true : false;

чтобы построить на Чинкан сказал для своего ответа, у меня есть более сухой подход и в es6 для тех, кто заинтересован:

class RadioExample extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedRadio: 'public'
    };
  }

  handleRadioChange = (event) => {
    this.setState({
      selectedRadio: event.currentTarget.value
    })
  };

  render() {
    return (
      <div className="radio-row">
        <div className="input-row">
          <input
            type="radio"
            name="public"
            value="public"
            checked={this.state.selectedRadio === 'public'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="public">Public</label>
        </div>
        <div className="input-row">
          <input
            type="radio"
            name="private"
            value="private"
            checked={this.state.selectedRadio === 'private'}
            onChange={this.handleRadioChange}
          />
          <label htmlFor="private">Private</label>
        </div>
      </div>
    )
  }
}

кроме этого будет иметь по умолчанию значение.