Arbeit mit Radio-Buttons in React

Die Arbeit mit Radio-Buttons radio unterscheidet sich etwas, zum Beispiel, von den Checkboxen. Das Problem ist, dass mehrere Radio-Buttons denselben State haben, aber unterschiedliche value.

Daher funktioniert die Arbeit folgendermaßen: jeder Radio-Button bekommt in das Attribut value seinen eigenen Wert geschrieben, und in das Attribut checked - eine spezielle Bedingung, die prüft, ob der State einem bestimmten Wert entspricht. Wenn ja, wird der Radio-Button ausgewählt, andernfalls bleibt er nicht ausgewählt.

Hier ist die Umsetzung des Beschriebenen:

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

Es sind 3 Radio-Buttons gegeben. Ein Absatz ist gegeben. Sorgen Sie dafür, dass der Wert des ausgewählten Radio-Buttons in diesem Absatz ausgegeben wird.

Fragen Sie den Benutzer mit Hilfe von Radio-Buttons nach seiner Lieblings-Programmiersprache. Geben Sie seine Wahl in einem Absatz aus. Wenn JavaScript gewählt wurde, loben Sie den Benutzer.