React ControlとUncontrolledコンポーネント

の状態を有する要素:input、select、textareaなどの

要素のステータスを管理するのは誰ですか?
コンポーネント管理→制御led
構成部品は管理されず、構成部品の参照のみ->制御されていない

1. Controlled Component

import React from "react";

class Controlled extends React.Component{
  state = { // 상태 저장
    value: "" 
  };
  
  render(){
    const { value } = this.state;
    return(
      <div>
        <input value={value} onChange={this.change} /> // 상태 전달
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  change = (e) => { 
    this.setState({
      value: e.target.value // 상태 관리
    });
  };
  click = () => { 
    console.log(this.state.value); // 상태 전송
  };

}

export default Controlled;

2. Uncontrolled Component

(Reactは仮想DOMを使用)実際のDOM->

にアクセスまたは改ざんしたくない

class Uncontrolled extends React.Component{
  render(){
    return(
      <div>
        <input id="my-input" />
        <button onClick={this.click}>전송</button>
      </div>
    );
  }

  click = () => { 
    const input = document.querySelector("#my-input");
    console.log(input); 
  };
}

export default Controlled;

3. Uncontrolled + Ref

class Uncontrolled extends React.Component{
  
  inputRef = React.createRef();
  
  render(){
    return(
      <div>
        <input ref={this.inputRef} />
        <button onClick={this.click}>전송</button>
    </div>
    );
  }

  click = () => { 
    // 클릭하면 inputRef에서 값 꺼내오는 역할
    console.log(this.inputRef.current.value); 
  };
}

export default Controlled;

🌟 通常、連続的に変更された値をチェックする場合はrefを使用します.