React, Vue 및 Svelte: 라디오 바인딩 비교

라디오 바인딩 입력...



쉬워요 ! 모든 프레임워크에서 라디오 바인딩은 정말 쉽습니다. Vue와 Svelte는 그들의 마법을 계속합니다 :)

확인해보세요 🚀

반응하다



Live Example

const [picked, setPicked] = useState<string>('React');

  const handleChange = ({
    target: { value },
  }: React.ChangeEvent<HTMLInputElement>) => {
    setPicked(value);
  };

<section>
 <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="React"
    name="picked"
    defaultChecked={true}
    onChange={handleChange}
  />
  <label htmlFor="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="Vue"
    name="picked"
    onChange={handleChange}
  />
  <label htmlFor="vue">Vue</label>
  <br />
  <span>Picked: {picked}</span>
</section>




Live Example

const picked = ref('react');

<section>
  <h2>Radio</h2>
  <input
    type="radio"
    id="react"
    value="react"
    v-model="picked"
    checked="true"
  />
  <label for="react">React</label>
  <br />
  <input
    type="radio"
    id="vue"
    value="vue"
    v-model="picked"
  />
  <label for="vue">Vue</label>
  <br />
  <span>Picked: {{ picked }}</span>
</section>


날씬한



Live Example

let frameworks: string = 'React';

<section>
    <h2>Radio</h2>
    <input
      type="radio"
      bind:group={frameworks}
      id="react"
      value={'React'}
    />
    <label for="react">React</label>
    <br />
    <input
      type="radio"
      bind:group={frameworks}
      id="vue"
      value={'Vue'}
    />
    <label for="vue">Vue</label>
    <br/>
    <span>Picked: {frameworks}</span>
</section>

좋은 웹페이지 즐겨찾기