Làm việc với radio trong React

Làm việc với radio radio có một số điểm khác biệt, ví dụ, so với các checkbox. Vấn đề nằm ở chỗ nhiều radio sẽ có cùng một state, nhưng value khác nhau.

Vì vậy, cách làm việc như sau: mỗi nút radio trong thuộc tính value được ghi giá trị của riêng nó, còn trong thuộc tính checked - một điều kiện đặc biệt, kiểm tra xem state có bằng một giá trị nhất định không. Nếu bằng - nút radio sẽ được đánh dấu, còn nếu không bằng - sẽ không được đánh dấu.

Dưới đây là cách triển khai đã mô tả:

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

Cho 3 nút radio. Cho một đoạn văn. Hãy làm sao cho giá trị của nút radio được chọn hiển thị trong đoạn văn này.

Sử dụng các nút radio, hãy hỏi người dùng về ngôn ngữ lập trình yêu thích của họ. Hiển thị lựa chọn của họ trong một đoạn văn. Nếu ngôn ngữ JavaScript được chọn, hãy khen ngợi người dùng.