Werk met Radio in React

Om met radio radio te werk verskil ietwat, byvoorbeeld, van dieselfde merkvliesies. Die probleem is dat verskeie radio's een en dieselfde staat sal hê, maar verskillende value.

Daarom werk dit soos volg: aan elke radioknoppie word sy eie waarde in die kenmerk value geskryf, en in die kenmerk checked - 'n spesiale voorwaarde wat nagegaan word, of die staat gelyk is aan 'n sekere waarde. As dit gelyk is - sal die radioknoppie gemerk word, en as dit nie gelyk is nie - sal dit nie gemerk word nie.

Hier is die implementering van die beskrywing:

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

Gegee 3 radioknoppies. 'n Paragraaf word gegee. Maak dit so dat die waarde van die gekose radioknoppie in hierdie paragraaf vertoon word.

Vra die gebruiker met behulp van radioknoppies oor sy gunsteling programmeringstaal. Vertoon sy keuse in 'n paragraaf. As die taal JavaScript gekies word, prys die gebruiker.