Puna me radio në React

Puna me radio radio ndryshon disi, për shembull, nga ato të checkbox-ave. Problemi është se disa radio do të kenë të njëjtën state, por value të ndryshme.

Prandaj puna bëhet në mënyrën e mëposhtme: çdo butoni radio në atributin value shkruajnë vlerën e tyre, dhe në atributin checked - një kusht të veçantë, i cili kontrollon, nëse state është i barabartë me një vlerë të caktuar. Nëse është i barabartë - butoni radio do të shënohet, dhe nëse nuk është i barabartë - nuk do të shënohet.

Këtu është implementimi i përshkruar:

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

Janë dhënë 3 butona radio. Është dhënë një paragraf. Bëni që vlera e butonit radio të zgjedhur të shfaqet në këtë paragraf.

Me ndihmën e butonave radio pyesni përdoruesin për gjuhën e tij të preferuar të programimit. Shfaqni zgjedhjen e tij në një paragraf. Nëse zgjidhet gjuha JavaScript, përgëzoni përdoruesin.