입력 구성 요소 만들기!

입력해야 하기 때문에 구성 요소 내부에 입력한 데이터를 저장해야 합니다.
이런 느낌인가요?

import React from "react";

export const IncorrectTextBox = (props: Props) => {
  const [value, setValue] = React.useState("");

  return (
    <label style={{ display: "block" }}>
      {`${props.label} `} 
      <input
        value={value}
        onChange={event => setValue(event.target.value)} />
    </label>
  );
}

사용할 때 이런 느낌이에요.

const App = () => {
  return (
    <div style={{ maxWidth: 400, margin: "auto", padding:50 }}>
      <IncorrectTextBox label="Input your fisrt name." />
      <IncorrectTextBox label="Input your last name." />
    </div>
  )
}

잘 입력한 것 같아요!완벽해!

입력한 영역을 확인하시겠습니까?

입력을 확인하기 위해 전체 이름을 표시하는 요소를 준비하세요!

const App = () => {
  return (
    <div style={{ maxWidth: 400, margin: "auto", padding:50 }}>
      <IncorrectTextBox label="Input your first name." />
      <IncorrectTextBox label="Input your last name." />
      <div>{`${firstName} ${lastName}`}</div>
    </div>
  )
}

그 다음에 firstName와lastName만 찾으면 표시됩니다!IncorrectTextBox 어떻게 구성 요소에서 해당하는 입력 값을 얻습니까?
어떻게 하면 좋을까요?
어떻게 하면 좋을까...?
못 가져.

관리 대상 구성 요소

사용자가 입력한 구성 요소의 기본은

통과props입력값 수락

props 에서 변경 사항을 수락할 때 실행되는 함수

큰 장면을 렌더링하는 동안 이 고장이 발견되었습니다.모든 구성 요소는 하나의 상태가 아니라 하나의 상태를 가지고 있다.
예를 들어, 자유 텍스트 입력의 경우 다음과 같습니다.

interface RevolutionaryTextBoxProps {
  value: string,
  onChange: (value: string) => void,
}

export const RevolutionaryTextBox = (props: RevolutionaryTextBoxProps) => {
  return (
    <input
      type="text"
      value={props.value}
      onChange={event => props.onChange(event.target.value)} />
  );
}

TypeScript이므로 정의됨interface.props에서 string형 매개 변수value를 수락합니다.그리고 사용자가 입력할 때마다 입력된 새 값을 전달하는 함수를 받고 실제로는 사용자가 입력할 때마다 실행합니다.
그런 다음 입력 어셈블리를 사용하는 측 관리 state 를 사용합니다.

const App = () => {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");

  return (
    <div style={{ maxWidth: 750, margin: "20px auto" }}>
      <label>
        FirstName
        <RevolutionaryTextBox
          value={firstName}
          onChange={setFirstName} />
      </label>
      <label>
        LastName
        <RevolutionaryTextBox
          value={lastName}
          onChange={setLastName} />
      </label>
      <div>{`${firstName} ${lastName}`}</div>
    </div>
  )
}

("Revolutionary"배경색으로 만들었어요.웃음)string형 입력을 받아들이는 간단한 구성 요소의 예를 제시했는데 이것은 number형의 수치 입력, boolean형의 팔꿈치 스위치, 슬라이더, DatePicker에서 기본적으로 같다.props 입력할 데이터 형식의 값을 수신하고 입력한 후 새 값을 매개 변수에 전달하고 실행하는 함수입니다.
이렇게 하면 이러한 표를 실현할 수 있다. 예를 들어 다른 입력 구성 요소의 값에 따라 필요한 입력 구성 요소도 변화할 수 있다.

const App = () => {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");

  return (
    <div className="container" style={{ maxWidth: 750, margin: "20px auto" }}>
      <label>
        FirstName
        <RevolutionalyTextBox
          value={firstName}
          onChange={value => {
            setFirstName(value);
            setLastName(value);  // setLastName()も同時に呼び出す
          }} />
      </label>
      <label>
        LastName
        <RevolutionalyTextBox
          value={lastName}
          onChange={setLastName} />
          <div>{`${firstName} ${lastName}`}</div>
      </label>
    </div>
  )
}

끝내다

나는 9개월의 무직 기간을 끝내고 4월부터 인터넷 기업에 취직했다🎊
저는 꿈에 그리던 React 및 TypeScript를 업무적으로 처리할 수 있습니다.🎉
새로운 React를 시작하는 사람도 있을 것 같습니다.
그런 사람이 읽게 해주면 좋겠다.