React'ta Radio ile Çalışma

Radio radio ile çalışmak, örneğin onay kutularına kıyasla biraz farklıdır. Sorun şu ki, birden fazla radio aynı state'e sahip olacak, ancak farklı value değerlerine sahip olacak.

Bu nedenle çalışma şu şekilde gerçekleşir: Her bir radio butonunun value özniteliğine kendi değeri yazılır ve checked özniteliğine - state'in belirli bir değere eşit olup olmadığını kontrol eden özel bir koşul. Eğer eşitse - radio butonu işaretlenmiş olacak, eşit değilse - işaretlenmemiş olacak.

Açıklananların uygulaması işte şöyle:

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