[react]Childコンポーネント→その他のコンポーネントプログラミングモード

17147 ワード
React テキストリンク
この文章はコードアカデミーのreact 101コースのノートです.
Child Components → Parents' State
💡 目的:親から受信したsetStateメソッドを使用して、親構成部品のステータスを変更します.
実施方法
  • Parent Componentのthis.setStateの実行方法の定義
    :handleClick()メソッド呼び出しsetState stateの変更
    class ParentClass extends React.Component {
  constructor(props) {
    super(props);

    this.state = { totalClicks: 0 };
  }

  handleClick() {
    const total = this.state.totalClicks;
    this.setState(
      { totalClicks: total + 1 }
    );
  }
}
  • 新しい方法は、bindの構造関数を要求する.
    :このメソッドをChild Componentに渡しても、Parent Componentのstateを変更できます(
    • )
    class ParentClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = { totalClicks: 0 };
    this.handleClick = this.handleClick.bind(this);
  }
  • メソッド定義およびバインディングが完了すると、このメソッドはChildコンポーネントpropsに渡される
      render() {
    return (
      <ChildClass onClick={this.handleClick} />
    );
  }
  • Child Componentはこのように伝達する方法
    • を用いる.
    export class ChildClass extends React.Component {
  render() {
    return (
      <button onClick={this.props.onClick}>
        Click Me!
      </button>
    );
  }
}
    Child Components → Sibling Components
    💡 目的:親構成部品から受け取ったsetStateメソッドを使用して、子構成部品が親構成部品のステータスを変更した後、親構成部品は他の子構成部品(兄弟)に渡されます.
    実施方法
  • Parent ComponentでsetStateメソッドを実行するChild Componentはthis.changeNameメソッドを提供し、setStateで値を変更するSibling Componentはthis.state.nameメソッドを提供します.
    •   render() {
    return (
      <div>
        <Child onChange={this.changeName} />
        <Sibling name={this.state.name} />
      </div>
    );
  }
  • Childコンポーネントでは、this.props.onChange関数を実行するhandleChangeメソッドが作成され、イベントリスナーに追加される.
    • export class Child extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    const name = e.target.value;
    this.props.onChange(name);
  }

  render() {
    return (
      <div>
        <select
          id="great-names"
          onChange={this.handleChange}>

          <option value="Frarthur">Frarthur</option>
          <option value="Gromulus">Gromulus</option>
          <option value="Thinkpiece">Thinkpiece</option>
        </select>
      </div>
    );
  }
}
  • Siblingコンポーネントには、Childコンポーネントの変更値を反映するjsx→{this.props.name}が含まれ、
    • をレンダリングするために使用されます.
    export class Sibling extends React.Component {
  render() {
    const name = this.props.name;
    return (
      <div>
        <h1>Hey, my name is {name}!</h1>
        <h2>Don't you think {name} is the prettiest name ever?</h2>
        <h2>Sure am glad that my parents picked {name}!</h2>
      </div>
    );
  }
}
    mysqlクエリーテーブルのフィールド/カラム名;クエリー・フィールド/カラム名が存在するテーブル
    [伯俊]データカー#22942