stateとは?

構成部品で変更可能な値.
構成部品に入力、変更または削除されたデータとして理解できます.

じょうたいへんか

構成部品内のステータスが変更または削除されている場合は、ステータスが変更されていることを示します.これらの変更を管理することをステータス管理と呼びます.
1つの素子でstateを変更するのは難しくありません.
ただし、子構成部品で親構成部品の状態を変更する方法は、次のとおりです.

「データが上から下へ一方向に流れる」というフィードバックの原則の前で、サブエレメントを親エレメントの状態に変更する方法.
答えは次のとおりです.

親要素の「状態を変更する関数」自体が子要素として渡され、

.
サブエレメントは、この関数

を実行します.

ゆっくり見ます.

関数をサブエレメントに渡す

まず、親構成部品です.
既存のステータスとステータスを変更する関数を定義し、Child Componentというサブエレメントを持ちます.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 상태
    this.state = {
      value: "========== 기존값 =========="
    };
    ...
  }

  // 상태를 변경하는 함수
  handleChangeValue() {
    ...
  }

  // 렌더링
  render() {
    return (
      <div>
        <div>값은 {this.state.value} 입니다</div>
        <ChildComponent /> // 하위 컴포넌트
      </div>
    );
  }
}

子部品Child Componentで親部品のステータスを変更します.
どうすればいいの?

親要素の「状態を変更する関数」自体が子要素として渡され、

.
サブエレメントは、この関数

を実行します.

以上の手順で、1番をコードに移動します.親構成部品のレンダー部分.

// 렌더링
  render() {
    return (
      <div>
        <div>값은 {this.state.value} 입니다</div>
        <ChildComponent clickHandler={this.handleChangeValue}/> // 상위 컴포넌트의 함수를 props로 전달했습니다.
      </div>
    );
  }

サブエレメントの状態を変更するclickHandlerという関数が渡されます.
では1番レッスン終了です!

昇格state

サブ構成部品での関数の実行

親構成部品から関数を渡すサブ構成部品を次に示します.

// 하위 컴포넌트
// 컴포넌트의 첫번째 인자는 props 객체인데, 구조분해할당을 통해 clickHandler에 직접 접근했습니다.
function ChildComponent({ clickHandler }) {
  
  // JSX로 버튼을 리턴해줍니다. 클릭 시에 clickHandler 함수가 실행됩니다.
  return <button onClick={() => clickHandler('xxxxxxxxxx 바뀐값 xxxxxxxxxx')}>값 변경</button>;
}

子構成部品はボタンを返します.このボタンをクリックすると、onClickイベントのため、親構成部品によって渡されるclickHandler関数が実行されます.ボタンはクリック時に実行する必要があるため、**コールバック関数として**実行します.**コールバック関数のパラメータにはstateに反映する値**が含まれます.
これで2つ目のプロセスが終わりました!
親構成部品で定義されている関数に再アップグレードします.

親構成部品からステータスを変更

サブエレメントに渡されるステータスを変更する関数を見てみましょう.
setState()メソッドを使用して状態を変更し、まずオブジェクトを使用する場合を見てみましょう.

オブジェクトを使用した状態の変更

// 상위 컴포넌트
...

// 상태를 변경하는 함수
handleChangeValue(data) {
  
  this.setState({
    value: data
  });
  
}

...

実行時に、サブコンポーネントからドラッグした変数(data)を使用してステータスが変更されます.
setState()メソッドのパラメータを使用して、オブジェクトのステータスを変更しています.
既存のステータスを参照する必要がない場合は、オブジェクトを使用してステータスを変更します.

コールバック関数を使用したステータスの変更

コールバック関数を使用する場合:

handleChangeValue(data) {
  
  this.setState((prevState) => {
    return {
      ...prevState,
      value: data
    };
  });
  
}

コールバック関数を使用する場合、コールバック関数の最初のパラメータは既存の状態(presState)です.
展開操作によって既存のステータスを一度展開し、追加するデータを追加します.構造分解割り当ての使用に注意してください.
これは通常、既存の状態を参照しなければならない場合に使用されます.
しかし,反応器の目標は後者の方法(コールバック関数により状態を変える)である.