React 에서 제어되지 않는 Textarea 요소 만들기

소개

이 랩에서는 React 에서 제어되지 않는 <textarea> 요소를 생성하는 방법을 배웁니다. 이 랩의 목적은 defaultValue 및 onChange props 를 사용하여 텍스트 영역의 값을 부모 컴포넌트의 콜백 함수로 전달하는 방법을 보여주는 것입니다. 이 랩을 마치면 React 에서 제어되지 않는 입력 필드를 생성하는 방법에 대한 이해도가 높아질 것입니다.

이것은 가이드 실험입니다. 학습과 실습을 돕기 위한 단계별 지침을 제공합니다.각 단계를 완료하고 실무 경험을 쌓기 위해 지침을 주의 깊게 따르세요. 과거 데이터에 따르면, 이것은 초급 레벨의 실험이며 완료율은 100%입니다.학습자들로부터 100%의 긍정적인 리뷰율을 받았습니다.

제어되지 않는 Textarea 요소

index.html 및 script.js는 이미 VM 에 제공되었습니다. 일반적으로 script.js 및 style.css에만 코드를 추가하면 됩니다.

이 함수는 부모 컴포넌트에 의해 제어되지 않는 <textarea> 요소를 렌더링합니다. 콜백 함수를 사용하여 입력 값을 부모 컴포넌트로 전달합니다.

이 함수를 사용하려면:

부모 컴포넌트에서 defaultValue prop 을 입력 필드의 초기 값으로 전달합니다.
onChange 이벤트를 사용하여 onValueChange 콜백을 트리거하고 새 값을 부모에게 보냅니다.

const TextArea = ({
  cols = 20,
  rows = 2,
  defaultValue,
  onValueChange,
  ...rest
}) => {
  return (
    <textarea
      cols={cols}
      rows={rows}
      defaultValue={defaultValue}
      onChange={({ target: { value } }) => onValueChange(value)}
      {...rest}
    />
  );
};

사용 예시:

ReactDOM.createRoot(document.getElementById("root")).render(
  <TextArea
    placeholder="Insert some text here..."
    onValueChange={(val) => console.log(val)}
  />
);

오른쪽 하단 모서리에 있는 'Go Live'를 클릭하여 포트 8080 에서 웹 서비스를 실행하십시오. 그런 다음 Web 8080 탭을 새로 고쳐 웹 페이지를 미리 볼 수 있습니다.

요약

축하합니다! 제어되지 않는 Textarea 요소 랩을 완료했습니다. LabEx 에서 더 많은 랩을 연습하여 기술을 향상시킬 수 있습니다.