Radionappuloiden käsittely Reactissa

Radionappuloiden radio käsittely eroaa hieman, esimerkiksi, samasta valintaruuduista. Ongelmana on, että usealla radionappulalla on sama tila, mutta eri value.

Siksi toiminta tapahtuu seuraavalla tavalla: jokaiselle radionappulalle value-attribuuttiin kirjoitetaan oma arvonsa, ja checked-attribuuttiin - erityinen ehto, joka tarkistaa, onko tila yhtä suuri kuin tietty arvo. Jos on yhtä suuri - radionappulasta tulee valittu, ja jos ei ole yhtä suuri - se on valitsematta.

Tässä on kuvatun toteutus:

function App() {
	const [value, setValue] = useState(1);
	
	function changeHandler(event) {
		setValue(event.target.value);
	}
	
	return <div>
		<input
			type="radio"
			name="radio"
			value="1"
			checked={value === '1' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="2"
			checked={value === '2' ? true : false}
			onChange={changeHandler}
		/>
		<input
			type="radio"
			name="radio"
			value="3"
			checked={value === '3' ? true : false}
			onChange={changeHandler}
		/>
	</div>
}

Annettu 3 radionappulaa. Annettu kappale. Tee niin, että valitun radionappulan arvo tulostetaan tähän kappaleeseen.

Käytä radionappuloita kysyäksesi käyttäjältä hänen suosikki ohjelmointikielensä. Tulosta hänen valintansa kappaleeseen. Jos valittu kieli on JavaScript, kehu käyttäjää.