여름

제어된 구성 요소는 React가 제어하는 ​​구성 요소이며 양식 데이터에 대한 단일 정보 소스입니다.

제어되지 않는 구성 요소는 양식 데이터가 React 구성 요소 내부가 아니라 DOM에 의해 처리되는 곳입니다.

HTML 양식

양식을 제출할 때 키-값 쌍으로 구성됩니다.

<form>
 <label for='id'> </label>
 <input id='id' type='text' name='key' value='value'>
</form>

HTML에서 사용자는 속성 값의 설정 여부에 관계없이 필드를 수정할 수 있습니다.

React를 사용하면 속성 값이 지정되지 않은 경우에만 필드를 수정할 수 있습니다.

통제되지 않은 필드

-> 입력 필드에 값이 입력되지 않았습니다.

<form<
    <label htmlFor="character">Character:</label>
    <input
        id="character"
        name="character"
        type="text"
        onChange={(event) => {
           const input = event.target;
           console.log('NAME:', input.name, 'VALUE:',      
            input.value);
          }}
    />
 </form>

for 대신에 htmlFor를 사용하십시오. <label> for는 JavaScript에서 예약된 키워드입니다.

사용자 입력을 감지할 수 있는 onChange 사용. 콘솔에 표시되는 디스플레이를 담당하는 onChange와 연결된 이벤트 리스너입니다.

onChange의 이벤트 리스너에 있는 event.target은 이벤트가 발생한 페이지의 요소인 <input> 필드입니다.

콘솔에 입력 속성인 이름(변경되지 않음)과 값(입력에 따라 다름)이 표시됩니다.

문자 필드에 설정된 값 속성이 없기 때문에 사용자가 입력한 필드에 값이 표시됩니다.

 const handleSubmit = (event) => {
    event.preventDefault();
    const firstName = event.target.firstName.value;
    const lastName = event.target.lastName.value;
    // Here we do something with form data
    console.log(firstName, lastName)
  }

 <form onSubmit={handleSubmit}>
        <label>
          Name:
          <input name="firstName" type="text" />
        </label>
        <label>
          Surname:
          <input name="lastName" type="text" />
        </label>
        <input type="submit" value="Submit" />
  </form>

위의 제어되지 않는 구성 요소는 다음과 같은 문제를 야기합니다. 값이 상태 수준에 저장되지 않습니다.

통제된 분야

<input> 필드는 값 속성의 <value>가 그것을 표시하는 구성 요소에 의해 제공될 때 제어된다고 합니다. 일반적으로 이 값은 구성 요소의 상태에서 나옵니다.
HTML과 다른 점: React는 value 속성을 통해 필드의 값을 제어합니다.

상태에서 초기화할 키의 이름을 변경해야 합니다.

렌더링에서 하드코딩된 값 대신 상태에 포함된 값을 사용하여 입력의 값 속성을 설정합니다.

상태 값 변경:

const EssayForm = () => {

const [ value, setValue ] = useState(''); 

const handleChange =(event) => { setValue({event.target.value});  }
const handleSubmit= (event) => {
 alert('An essay was submitted: ' + value);
 event.preventDefault();
 }

  render() {
    return (
      <form onSubmit={handleSubmit}>
        <label>
          Essay:
          <textarea value={value} onChange={handleChange} />             
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

첫걸음