Raadiotegelemetega töötamine Reactis

Töötamine radio radio elementidega erineb mõnevõrra, näiteks sama tüüpi märkeruutudest. Probleem on selles, et mitu radiotelemet jagavad üht ja sama staatust, kuid neil on erinevad value väärtused.

Seetõttu toimub töötamine järgmiselt: igale raadionupule kirjutatakse value atribuuti oma väärtus, ja checked atribuuti - spetsiaalne tingimus, mis kontrollib, kas staatus võrdub kindla väärtusega. Kui võrdub - muutub raadionupp märgituks, ja kui ei võrdu, jääb märkimata.

Siin on kirjeldatud meetodi realiseering:

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

Antud on 3 raadionuppu. Antud on lõik. Tehke nii, et valitud raadionupu väärtus kuvataks selles lõigus.

Kasutades raadionuppe, küsige kasutajalt tema lemmik programmeerimiskeelt. Kuva tema valik lõigus. Kui valitud keel on JavaScript, kiida kasutajat.