입력을 가벼운 방식으로 처리하다

아마존에서 내 책 보기https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
지금 http://jauyeung.net/subscribe/에 내 이메일 목록을 구독하십시오.
Svelte는 전방 웹 응용 프로그램을 개발하는 데 사용되는 신흥 전방 프레임워크입니다.
그것은 사용이 간단해서 우리가 결과를 신속하게 만들 수 있게 한다.
본문에서, 우리는 날씬한 구성 요소의 텍스트 입력을 어떻게 처리하는지 이해할 것이다.

데이터 바인딩
우리는 bind:value 명령을 사용하여 입력 값을 구성 요소의 변수에 연결할 수 있습니다.
이를 사용하려면 다음과 같이 작성할 수 있습니다.App.svelte  :

<script>
  let name = "";
</script>

<input bind:value={name}>

<p>{name}</p>

위 코드에서, 우리는 bind:value 명령을 사용하여 입력 값을 구성 요소의 name 변수에 연결합니다.
따라서 우리가 입력할 때, 값은 입력 아래의 p 요소에 표시됩니다.
DOM에서 모든 것은 문자열입니다.사용하기 전에, 우리는 입력 값을 우리가 원하는 값으로 바꾸어야 한다.bind:value 이 일을 맡는다.
예를 들어,

<script>
  let a = 1;
</script>

<label>
  <input type=number bind:value={a} min=0 max=10>
</label>
<br>
<label>
  <input type=range bind:value={a} min=0 max=10>
</label>

그런 다음 숫자 입력에 값을 입력하거나 슬라이더 값을 변경하면 두 입력 모두 변경되는 것을 볼 수 있습니다.

확인란 입력
Svelte는 확인란 입력을 처리할 수 있습니다.따라서 우리는 복선 상자에서 쉽게 선택 값을 얻을 수 있다.
예를 들어 다음과 같은 코드를 작성할 수 있습니다.

<script>
  let yes = false;
</script>

<input type=checkbox bind:checked={yes}>
<p>{yes}</p>

p표시의 값이 복선상자를 선택하고 취소할 때 변화하는 것을 볼 수 있습니다. bind:checked 속성이 선택한 값을 yes 변수에 귀속시키기 때문입니다.

단체 투입
우리는 bind:group 명령을 사용하여 그룹의 값을 값에 연결할 수 있다.
예를 들어, 라디오 버튼 세트가 값을 공유하므로 라디오 버튼에 유용합니다.한 번에 하나만 선택할 수 있습니다.bind:group를 사용하여 라디오 그룹을 만들려면 다음을 작성할 수 있습니다.

<script>
 let fruits = ["apple", "grape", "orange"];
 let selectedFruit = "";
</script>

{#each fruits as fruit}
<label>
  <input type=radio bind:group={selectedFruit} value={fruit} >
  {fruit}
  <br>
</label>
{/each}
<p>{selectedFruit}</p>

위의 코드에서, 우리는 bind:group selectedFruit 에 귀속할 것입니다. 이것은 그룹의 선택 값을 가지고 있습니다.
각 라디오 버튼의 value 속성을 fruit로 설정하면 Svelte에서 selectedFruit 값을 value 값으로 설정합니다.
따라서, 우리가 선택 단추를 눌렀을 때, 우리는 p 요소에서 선택 단추 그룹의 선택 값을 볼 수 있다.
또한 한 번에 하나의 라디오 버튼만 선택합니다.

텍스트 영역 입력
텍스트 영역 입력의 작업 원리는 텍스트 입력과 유사하다.예를 들어 다음과 같이 쓸 수 있습니다.

<script>
 let text = "";
</script>

<textarea bind:value={text}></textarea>
<p>{text}</p>

bind:value 텍스트 영역에 입력한 값과 값text을 연결합니다.
그리고 우리는 p 라벨에 text 표시됩니다.

바인딩 선택
다음 코드를 작성하여 select 요소의 값을 바인딩할 수 있습니다.

<script>
  let selected = "";
  let names = [
    { id: 1, name: "Jane" },
    { id: 2, name: "John" },
    { id: 3, name: "Mary" }
  ];
</script>

<select bind:value={selected} >
{#each names as name}
  <option value={name}>
    {name.name}
  </option>
{/each}
</select>
<p>{selected.name}</p>

위의 코드에서 우리는 전체name의 대상을valueprop에 전달할 것이다.
그리고 우리가 옵션을 선택하면 selected 선택한 옵션으로 설정되어 있고, name 속성을 표시해서 이름을 표시할 수 있습니다.

다선
여러 속성 세트가 있는 선택 요소 중에서 여러 항목을 선택할 수 있습니다.
예를 들어 다음과 같은 코드를 작성할 수 있습니다.

<script>
   let selected = "";
   let fruits = ["apple", "orange", "grape"];
</script>

<select bind:value={selected} multiple >
{#each fruits as fruit}
  <option value={fruit}>
    {fruit}
  </option>
{/each}
</select>
<p>{selected}</p>

우리가 해야 할 일은 selected 명령을 bind:value 명령에 전달하고 Svelte는 자동으로 선택한 모든 값을 얻는 것이다.
따라서 목록에서 하나 이상의 값을 선택하면 p 요소에 표시됩니다.

내용 편집 가능 바인딩contenteditable를 true로 설정한 모든 요소는 코드의 변수에 귀속될 수 있습니다.
예를 들어 다음과 같이 쓸 수 있습니다.

<script>
   let html = "";
</script>

<style>
      [contenteditable] {
        height: 200px;
        width: 90vw;
      }
</style>

<div
  contenteditable="true"
  bind:innerHTML={html}
></div>
<p>{html}</p>

위 코드에서 우리는div의 contenteditable 속성을 true로 설정합니다.그리고 우리는 bind:innerHTML를 사용하여 html 변수에 귀속시킨다.contenteditable를 true로 설정했기 때문에 우리는 그것을 입력할 수 있고 p탭에 입력값을 표시할 수 있다. bind 데이터가 귀속되어 있기 때문이다.

각 바인딩each 블록에 연결된 요소는 수정 중인 항목의 값을 바꿉니다.
예를 들어,

<script>
  let todos = [
    { done: false, text: "eat" },
    { done: false, text: "drink" },
    { done: false, text: "sleep" }
  ];

$: remaining = todos.filter(t => !t.done).length;
</script>

<h1>Todos</h1>

{#each todos as todo}
  <div class:done={todo.done}>
    <input
      type=checkbox
      bind:checked={todo.done}
    >

    <input
      placeholder="What needs to be done?"
      bind:value={todo.text}
    >
  </div>
{/each}

<p>{remaining} remaining</p>

그런 다음 입력이나 확인란의 값을 변경하면 템플릿에 반영됩니다.
예를 들어 remaining는 확인란을 선택하고 선택 취소할 때 업데이트됩니다.

결론
우리는 bind 명령을 사용하여 각종 컨트롤의 입력 값을 변수의 값에 연결할 수 있다.contenteditable 속성을 true로 설정한 요소를 제외하고는 본 컴퓨터의 폼 요소도 처리할 수 있습니다.