React 팁 — 입력 데이터 바인딩

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

React는 현대적인 대화형 프론트 엔드 웹 앱을 빌드하는 데 가장 많이 사용되는 프론트 엔드 라이브러리입니다. 모바일 앱을 구축하는 데에도 사용할 수 있습니다.

이 기사에서는 다양한 폼 컨트롤을 React 앱에 추가하고 상태를 컨트롤 값으로 설정하는 방법을 살펴보겠습니다.

드롭다운

드롭다운은 많은 앱에 추가되는 일반적인 양식 입력 제어 요소입니다. HTML의 select 요소입니다. React에서는 select 요소의 value 속성을 우리가 선택한 값으로 설정해야 하고, onChange 핸들러를 추가하여 선택된 값을 가져와 상태로 설정하는 핸들러를 추가해야 합니다.

예를 들어 이를 수행하기 위해 다음 코드를 작성합니다.

import React from "react";

export default function App() {
  const [fruit, setFruit] = React.useState("");
  return (
    <div className="App">
      <select value={fruit} onChange={e => setFruit(e.target.value)}>
        <option value="apple">apple</option>
        <option value="orange">orange</option>
        <option value="grape">grape</option>
      </select>
      <p>{fruit}</p>
    </div>
  );
}

위의 코드에는 다양한 옵션이 있는 select 요소가 있습니다. value prop이 fruit 상태로 설정되어 있고 setFruit 값을 업데이트하기 위해 fruit를 호출하는 함수가 있습니다.

그런 다음 p 요소 내부에 렌더링된 fruit 값이 있습니다. onChange 핸들러는 드롭다운 선택을 변경할 때 선택한 값이 표시되도록 업데이트fruit합니다.

드롭다운 텍스트와 값이 동일한 경우 value 속성의 값을 생략할 수 있습니다.

다중 선택 값

선택 요소를 사용하여 여러 값을 선택할 수도 있습니다. 드롭다운 대신 Ctrl-클릭을 눌러 여러 값을 선택할 수 있는 상자가 됩니다.

선택한 여러 값을 가져온 다음 selected 속성이 true 로 설정된 값을 검색하여 상태로 설정할 수 있습니다.

예를 들어 다음을 작성하여 이를 수행할 수 있습니다.

import React from "react";

export default function App() {
  const [fruits, setFruits] = React.useState("");
  const handleChange = e => {
    const options = e.target.options;
    setFruits(
      [...options]
        .filter(o => o.selected)
        .map(o => o.value)
        .join(",")
    );
  };
  return (
    <div className="App">
      <select multiple onChange={handleChange}>
        <option>apple</option>
        <option>orange</option>
        <option>grape</option>
      </select>
      <p>{fruits}</p>
    </div>
  );
}

위의 코드에서 multiple의 select 소품을 true로 설정하여 선택 요소에서 객관식 선택을 가능하게 합니다.

그런 다음 handleChange 함수에서 모든 선택 사항이 있는 options 배열과 유사한 객체를 퍼뜨립니다.

다음으로 filter가 selected로 설정된 것을 반환하는 콜백으로 true를 호출하여 새 배열에서 선택된 배열을 유지합니다. 그런 다음 value 속성을 반환하는 콜백을 전달하여 배열에 매핑합니다.

그런 다음 join를 호출하여 문자열 배열을 하나의 문자열로 결합합니다.

따라서 다중 선택 상자에서 하나 이상의 항목을 선택하면 선택한 선택 항목이 쉼표로 구분되어 표시됩니다.

텍스트 입력

단일 선택 드롭다운과 마찬가지로 value 소품을 입력된 값을 보유하는 상태로 설정하고 onChange 핸들러를 입력된 값을 가져오는 함수로 설정한 다음 전달된 상태로 설정해야 합니다. value 소품으로.

예를 들어 다음과 같이 작성할 수 있습니다.

import React from "react";

export default function App() {
  const [fruit, setFruit] = React.useState("");
  return (
    <div className="App">
      <label>Favorite Fruit</label>
      <br />
      <input value={fruit} onChange={e => setFruit(e.target.value)} />
      <p>{fruit}</p>
    </div>
  );
}

위의 코드에는 input 요소가 있습니다. fruit 상태를 value 로 전달합니다. 따라서 입력된 텍스트로 업데이트하려면 setFruit 상태를 업데이트하기 위해 입력된 값이 있는 e.target.value 와 함께 fruit를 호출해야 합니다.
fruit 상태는 p 요소에서 렌더링됩니다. 결국 텍스트 입력에 무언가를 입력하면 입력된 텍스트가 p 요소에 표시되는 것을 볼 수 있습니다.

결론

onChange 핸들러를 사용하여 선택 요소를 추가하고 선택한 값을 상태 변수에 바인딩할 수 있습니다. 그런 다음 업데이트한 상태로 value prop을 설정합니다.

사용자가 여러 옵션을 선택할 수 있는 선택 상자를 추가하려면 선택 요소를 추가하고 multiple 소품을 true  로 설정할 수 있습니다. 그런 다음 onChange 핸들러에서 e.target.options 배열과 유사한 객체와 함께 옵션을 얻습니다. 배열 옵션을 사용하려면 스프레드 연산자를 사용하여 배열로 변환합니다.

그런 다음 selected 속성이 true 로 설정된 속성을 유지하여 선택한 속성을 선택할 수 있습니다.

텍스트 입력의 입력된 값을 상태에 바인딩하는 것은 선택 요소에 바인딩하는 방식과 유사하게 수행됩니다. 입력된 값으로 상태를 업데이트하기 위해 onChange에서 반환된 상태 변경 함수를 호출하는 useState 핸들러가 있습니다.