Pengendalian Radio dalam React

Pengendalian radio radio agak berbeza, contohnya, berbanding dengan kotak semak. Masalahnya ialah beberapa radio akan mempunyai keadaan (state) yang sama, tetapi value yang berbeza.

Oleh itu, pengendalian dilakukan dengan cara berikut: setiap butang radio dalam atribut value merekodkan nilainya sendiri, dan dalam atribut checked - syarat khas yang memeriksa, sama ada keadaan (state) sama dengan nilai tertentu. Jika sama, butang radio akan menjadi ditanda, dan jika tidak sama - akan menjadi tidak ditanda.

Berikut adalah pelaksanaan yang diterangkan:

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

Diberi 3 butang radio. Diberi satu perenggan. Buatkan supaya nilai butang radio yang dipilih dipaparkan dalam perenggan ini.

Dengan menggunakan butang radio, tanya pengguna tentang bahasa pengaturcaraan kegemarannya. Paparkan pilihannya dalam perenggan. Jika bahasa JavaScript dipilih, puji pengguna.